React 组件通讯

目录

1、组件通讯的三种方式

1.1 父子关系

1.2 兄弟关系

1.3 跨组件通信Context

2、 组件的 props

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

在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。

而在这个过程中，多个组件之间不可避免的要共享某些数据 。

为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。

1、组件通讯的三种方式

组件之间的通讯分为 3 种：

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

1.1 父子关系

1、父传子首先，父组件要提供传递state数据，然后给子组件标签添加属性，值为 state 中的数据。

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

1. 类组件使用this.props获取props对象

   

2. 函数式组件直接通过参数获取props对象

   

然后我们来看看效果。狗头

2、子传父

父组件 ：

函数子组件：

类子组件：

1.2 兄弟关系

如何实现子组件之间通信？

核心思路：子组件将消息传给一个公共的父组件，再由父组件传给另外一个子组件。大家可以看下图。

实现步骤：

1、先把State中的数据通过子传父 传给 App

2、再把App接收到的State中的 数据 通过父传子 传给 Stop 3、Stop 接收 数据看效果：

小结：

• 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态 。
• 思想：状态提升 。
• 公共父组件职责：1. 提供共享状态 2. 提供操作共享状态的方法 。
• 要通讯的子组件只需通过 props 接收状态或操作状态的方法。

1.3 跨组件通信Context

如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递

作用： 跨组件传递数据

先看一下我现在的项目结构：

Stop 组件

State 组件

App 组件

页面效果：

现在的App 相对于 Stop 就是 爷爷 和 孙子了，解下来就来看看如何实现跨组件通信。

实现步骤：

首先我们，要新一个js 文件，用于跨组件通信使用，这个文件要编写的内容也很简单，大家可以看看。

接下来要修改一下App.js。

这里使用Provider包裹根组件提供数据 ，相当于生产者生产数据，有生产者就有消费者，我们来看看如何消费数据。

要用到数据的组件使用Consumer包裹获取数据。然后大家看看效果。

这样我们就实现了跨组件通讯，就不需要一个一个往下传递了。

2、 组件的 props

组件是封闭的，要接收外部数据应该通过 props 来实现。

props的作用：接收传递给组件的数据。props是只读对象（readonly）。

props可以传递任意数据，数字、字符串、布尔值、数组、对象、函数、JSX。

• 传递数据：给组件标签添加属性
• 接收数据：函数组件通过参数props接收数据，类组件通过 this.props 接收数据。