React组件化开发

1.组件的定义方式

• 函数组件Functional Component
• 类组件Class Component

2.类组件

export class Profile extends Component {
  render() {
    console.log(this.context);
    return (
      
Profile
    )
  }
}

• 组件的名称是大写字符开头（无论类组件还是函数组件）
• 类组件需要继承自 React.Component
• 类组件必须实现render函数
• constructor是可选的，我们通常在constructor中初始化一些数据

render函数的返回值

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一:

• React 元素：通常通过 JSX 创建
• 数组或 fragments：使得 render 方法可以返回多个元素
• Portals：可以渲染子节点到不同的 DOM 子树中
• 字符串或数值类型：它们在 DOM 中会被渲染为文本节点
• 布尔类型或 null：什么都不渲染

3.函数组件

函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容。

函数组件有自己的特点:

• 没有生命周期，也会被更新并挂载，但是没有生命周期函数
• this关键字不能指向组件实例（因为没有组件实例）
• 没有内部状态（state）

4.生命周期

React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

• 实现componentDidMount函数：组件已经挂载到DOM上时，就会回调
• 实现componentDidUpdate函数：组件已经发生了更新时，就会回调
• 实现componentWillUnmount函数：组件即将被移除时，就会回调

不常用的生命周期

• getDerivedStateFromProps：state 的值在任何时候都依赖于 props时使用；该方法返回一个对象来更新state
• getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）
• shouldComponentUpdate：可进行state、props、context进行新旧对比，返回true或false进行是否更新组件

5.组件之间的通信

• 父组件通过 属性=值 的形式来传递给子组件数据
• 子组件通过 props 参数获取父组件传递过来的数据

父组件：

import React from "react"
// import HelloWorld from "./Components/HelloWorld"
import TabControl from './Components/父子组件通信案例'
// import NavBar from './Components/实现插槽一'
// import NavBar from './Components/实现插槽二'
// import TabControl from './Components/作用域插槽'
// import AppHome from "./Components/非父子组件通信-context/AppHome";

class App extends React.Component {
  constructor() {
    super()
    console.log("hello react");
    this.state = {
      message: "hello react",
      isShow: true,
      titles: ['流行', '新款', '精选'],
      curIndex: 0
    }
  }
  changeText() {
    this.setState({
      message: 'hello  hgf'
    })
  }
  switchText() {
    this.setState({
      isShow: !this.state.isShow
    })
  }

  switchTab(curIndex){
    this.setState({curIndex})
  }

  render() {
    const { titles, curIndex } = this.state
    return (
      

         this.switchTab(curIndex)} />
        {/* 
{titles[curIndex]}
 */}
        {/* 
{message}
 */}
        {/*  this.switchText()}>切换 */}
        {/* {isShow && } */}
        {/*  this.changeText()}>修改文本 */}
        {/* 插槽实现1 */}
        {/* 
          左边
          
中间部分
          右边
         */}
        {/* 插槽实现二 */}
        {/* 左按钮} centerSlot={
插槽实现二
} rightSlot={右按钮} /> */}
        {/* 作用域插槽 */}
        {/*  {item}} changeTab={(curIndex) => this.switchTab(curIndex)} />
        
{titles[curIndex]}
 */}
        {/* 非父子组件通信 */}
        {/*  */}
      
    )
  }

  componentDidMount() {
    console.log("component Mount")
  }

  componentDidUpdate() {
    console.log("component Update");
  }
}

export default App

子组件：

import React, { Component } from 'react'
import "./tab-control.css"

export class index extends Component {
  constructor() {
    super()
    this.state = {
      curIndex: 0
    }
  }
  changeCurIndex(index) {
    this.setState({curIndex: index})
    this.props.changeTab(index)
  }
  render() {
    const {titles} = this.props
    const {curIndex} = this.state
    return (
      

        

        {
          titles.map((item, index) => {
            return (
              
 this.changeCurIndex(index)}>
                {item}
              
            )
          })
        }
        

      
    )
  }
}

export default index

6.React中实现插槽

React对于这种需要插槽的情况非常灵活，有两种方案可以实现：

• 组件的children子元素
• props属性传递React元素

方式一：

import React, { Component } from 'react'
import "./style.css"

export class index extends Component {
  render() {
    const {children} = this.props

    return (
      

        

          {children[0]}
        
        

        {children[1]}
        
        

        {children[2]}
        
      
    )
  }
}

// index.propTypes = {
//   children: PropTypes.element
// }

export default index

方式二：

import React, { Component } from 'react'
import "./style.css"

export class index extends Component {
  render() {
    const {leftSlot, centerSlot, rightSlot} = this.props

    return (
      

        

          {leftSlot}
        
        

        {centerSlot}
        
        

        {rightSlot}
        
      
    )
  }
}

// index.propTypes = {
//   children: PropTypes.element
// }

export default index

7.context应用场景

非父子组件数据的共享：

对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）

• React提供了一个API：Context
• Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props
• Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言

Context相关API：

React.createContext

• 创建一个需要共享的Context对象

• 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值
• defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值

Context.Provider

• 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化
• Provider 接收一个 value 属性，传递给消费组件
• 一个 Provider 可以和多个消费组件有对应关系
• 多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据
• 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染

创建context

import React from "react";

const ThemeContext = React.createContext({nickname: 'curry', work: '前端'})

export default ThemeContext

import React from "react";

const UserContext = React.createContext()

export default UserContext

 提供值

import React, { Component } from 'react'
import ThemeContext from './context/theme-context'
import UserContext from './context/user-context'
import Home from './context/Home'
import Profile from './context/Profile'

export class AppHome extends Component {
  render() {
    return (
      

        App
        
          
            
          
        
        
      
    )
  }
}

export default AppHome

获取和使用方式 

import React, { Component } from 'react'
import ThemeContext from './theme-context'

export class Profile extends Component {
  render() {
    console.log(this.context);
    return (
      
Profile
    )
  }
}

Profile.contextType = ThemeContext

export default Profile

import React, { Component } from 'react'
import ThemeContext from './theme-context';
import UserContext from './user-context';

export class HomeInfo extends Component {
  render() {
    console.log(this.context);
    return (
      

        HomeInfo
        
          {
            value => {
              return 
InfoUser: {value.age}
            }
          }
        
        
    )
  }
}

HomeInfo.contextType = ThemeContext

export default HomeInfo