react中组件通信

今天我们来说一下react中的组件通信流程。

react中组件通信流程分为父传子、子传父、非父子之间传值。

1.父传子组件通信

思路：1.在父组件的子组件中绑定一个自定义属性，自定义属性的值就是传递的数据

2.在子组件中通过this.props来接收父组件传递过来的数据，函数组件通过参数来接收

类组件中使用参考代码

父组件                                                         

子组件

函数组件中使用参考代码

函数式组件通过参数接收父组件传递过来的参数

在类组件中，如果使用了构造函数， 应该将 props 传递给 super ，否则无法在构造函数中获取

到 props

2.props

props 的特点

1. 可以给组件传递任意类型的数据

2. props 是 只读 的对象，只能读取属性的值，无法修改对象

props 的 children 属性

通过 props 属性模拟 vue 中的匿名插槽

3.通过父传子组件通信模拟vue中的具名插槽

4.props属性值验证

有时候别人在使用我们封装好的组件的时候，传递值和我们预期的值可能会不一样。这样就

会导致报错，而为了能够让用户快速的找到报错的原因及时修改，我们往往要对我们接收的

props 参数进行验证

props 校验的步骤

1. 安装 prop - types 第三方包

2. 导入 props - types 包

3. 使用 组件名 .propTypes = {} 来给组件的 props 添加校验规则

4. 校验规则通过 PropTypes 对象来指定

如果我们传递的 props 类型和我们要求的不一样，则会报错

props 属性值的约束规则

常见类型： array 、 bool 、 func 、 number 、 object 、 string

React 元素类型： element

必填项： isRequired

特定结构的对象： shape({ })

props 约束规则示例

props 属性的默认值

有的时候我们为了让我们的组件使用起来更方便，需要给组件设置默认值，即在不传递该属

性时生效，传递后以传递的值为准

语法格式： 组件名 .defaultProps

5. 子传父组件通信

思路：子传父组件通过利用的是回调函数的方式。即在父组件中定义函数，在子组件中调用函数

步骤：

1. 在父组件中定义一个回调函数

2. 在子组件的标签上定义一个自定义属性，值为定义的回调函数

3. 在子组件中通过 this.props 来调用这个函数，并将要传递的数据作为参数传递给该函数

6. 兄弟组件之间通信

状态提升

将共享状态 ( 数据 ) 提升的最近的公共父组件中，由父组件统一管理这个状态

父组件

组件 A

组件 B

发布订阅模式

基本原理：订阅者提供一个回调函数，保存到一个数组中；发布者调用数组中的回调函数，

传递参数

发布中心 bus.js

组件 A

组件 B

7. Context实现跨组件之间的通信

Context 可以实现将根组件中的数据传递给其任意的子组件数据。可以传递给儿子，也可以跨过儿

子直接给孙子

使用步骤

1. 在 src 目录下创建一个 bus.js 文件并调用 createContext() 方法，创建一个 context 对象，

然后导出

2. 在 App 根组件中从 bus.js 中导入 Provider 组件，用来提供数据

3. 使用 Provider 组件作为父节点

4. 设置 value 属性，值为要传递的数据

5. 指定 contextType 读取当前创建的 context 对象

6. 使用 this.context 来渲染值

参考代码

bus.js

根组件 App.js

子组件 B

如果是函数组件可以通过 Consumer 来渲染数据