【React从0开始】组件篇

组件通信

为了复用组件，组件一般都会维护一个独立的数据状态。同时我们在组件化开发的过程中，会把一个功能拆分成多个组件，难免在实现需求时需要互相传递一些数据。
组件通信：让各组件间进行沟通，传递数据。
组件间的关系有：

1. 亲子关系
2. 姐妹关系：自定义事件模式 eventBus/通过共同的亲组件通信
3. 其他关系：mobx/redux/zustand

亲传子实现

通过props传递
📣注意

1. props是只读对象
   单向数据流。获取后在组件内部复制修改。
2. props可以传递任意数据

子传亲

利用闭包，在亲组件定义回调函数，修改亲组件的状态数据（用到this，需使用箭头函数）。传递回调函数作为props

姐妹组件通信

将共享状态提升到最近的亲组件。在亲组件中定义共享状态及操作共享状态的方法。将它们分别传递给姐妹组件。

跨组件通信

（透传）
在组件树上不依赖一层层的props进行传递。

import React, { createContext }  from 'react'

// 1. 创建Context对象 
const { Provider, Consumer } = createContext()


// 3. 消费数据
function ComC() {
  return (
    <Consumer >
      {value => <div>{value}</div>}
    </Consumer>
  )
}

function ComA() {
  return (
    <ComC/>
  )
}

// 2. 提供数据
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <Provider value={this.state.message}>
        <div className="app">
          <ComA />
        </div>
      </Provider>
    )
  }
}

export default App

组件进阶

Children属性

表示该组件的子节点，只要组件内部有子节点，props中就有该属性。

props校验

确保传入正确格式的props。
使用prop-types进行校验：

1. 安装属性校验包：yarn add prop-types
2. 导入prop-types 包
3. 使用 组件名.propTypes = {} 给组件添加校验规则

四种常见结构
4. 常见类型：array、bool、func、number、object、string
5. React元素类型：element
6. 必填项：isRequired
7. 特定的结构对象：shape({})

import PropTypes from 'prop-types'
List.propTypes = {
  colors: PropTypes.array
}
//常用规则
List.propTypes={
	list:PropTypes.func.isRequired,
	special:PropTypes.shape({
		color: PropTypes.string,
		fontSize: PropTypes.number
	})
}

默认值

1. 函数组件：直接使用函数参数默认值
2. 类组件：使用类静态属性声明：static defaultProps = { pageSize: 10 }

生命周期

只有类组件有生命周期。

挂载阶段

钩子函数	触发时机	作用
constructor	创建组件时，最先执行，初始化的时候只执行一次	1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render	每次组件渲染都会触发	渲染UI（注意： 不能在里面调用setState()
componentDidMount	componentDidMount 组件挂载（完成DOM渲染）后执行，初始化的时候执行一次	1. 发送网络请求 2.DOM操作

更新阶段

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与 挂载阶段 是同一个render）
componentDidUpdate	组件更新后（DOM渲染完毕）	DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

卸载阶段

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）