目录
1、组件通讯的三种方式
1.1 父子关系
1.2 兄弟关系
1.3 跨组件通信Context
2、 组件的 props
组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。
在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。
而在这个过程中，多个组件之间不可避免的要共享某些数据 。
为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。
1、组件通讯的三种方式
组件之间的通讯分为 3 种：
- 父子关系 - 最重要的
- 兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信
- 其它关系 - mobx / redux / 基于hook的方案
1.1 父子关系
1、父传子首先，父组件要提供传递state数据，然后给子组件标签添加属性，值为 state 中的数据。
子组件中通过 props 接收父组件中传过来的数据：
- 类组件使用this.props获取props对象
- 函数式组件直接通过参数获取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 接收数据。
