小白一看就会的React学习笔记 四（ 组件通信 详解 ）

1.组件通信的意义 （和vue类似，其实vue就是仿照react写的）

目标任务:   了解为什么需要组件通信

组件是独立且封闭的单元，默认情况下组件只能使用自己的数据（state）

组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据

为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信

1. 父子关系 -  最重要的
2. 兄弟关系 -  自定义事件模式产生技术方法 eventBus  /  通过共同的父组件通信
3. 其它关系 -  mobx / redux / zustand

2.父传子实现

目标任务:   实现父子通信中的父传子，把父组件中的数据传给子组件

实现步骤

1. 父组件提供要传递的数据  -  state
2. 给子组件标签添加属性值为 state中的数据

3. 子组件中通过 props 接收父组件中传过来的数据

    1.  类组件使用this.props获取props对象
    2.  函数式组件直接通过参数获取props对象

3. props说明

目标任务:   知道props传递时的一些注意事项

1.  props是只读对象（readonly）

根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改

2. props可以传递任意数据

数字、字符串、布尔值、数组、对象、函数、JSX

传递函数用法一样

一般都用解构

4. 子传父

目标任务:   实现父子通信中的子传父

口诀： 父组件给子组件传递回调函数，子组件调用

---

实现步骤

1. 父组件提供一个回调函数 - 用于接收数据
2. 将函数作为属性的值，传给子组件
3. 子组件通过props调用 回调函数
4. 将子组件中的数据作为参数传递给回调函数

5. 兄弟之间的传值（和vue差不多 都是创建个公共的组件，然后传递接收）

目标任务:   实现兄弟组件之间的通信

核心思路： 通过状态提升机制，利用共同的父组件实现兄弟通信 实现步骤

1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

• • 提供共享状态
  • 提供操作共享状态的方法

2. 要接收数据状态的子组件通过 props 接收数据
3. 要传递数据状态的子组件通过props接收方法，调用方法传递数据

6. 跨组件之间的传递 使用 Context对象 导出 Provider 和 Consumer对象 , 和 vue的相似 ，vue是provide，inject

实现步骤
1- 创建Context对象 导出 Provider 和 Consumer对象

    const { Provider, Consumer } = createContext()

2- 使用Provider包裹上层组件提供数据

    <Provider value={this.state.message}>

    {/* 根组件 */}

    </Provider>

3- 需要用到数据的组件使用Consumer包裹获取数据

    <Consumer >
        {value => /* 基于 context 值进行渲染*/}
    </Consumer>