React中组件通信有哪些方式？

React中组件间的通信有一下几种情况：

        父组件向子组件通信，可以通过props方式传递数据；也可以通过ref防暑传递数据；
        子组件向父组件通信，通过回调函数方式传递数据；
父组件向后代所有组件传递数据，如果组件层级过多，通过props的方式传递数据狠繁琐，可以通过Context.Provider的方式；
         一个数据源实现跨组件通信，通过指定contextType的方式来实现
        多个数据源实现跨组件通信，使用Context.Consumer方式实现；

1.父组件向子组件通信 ：

       父组件向子组件通信有两种方式，一是父组件通过熟悉进行传递，子组件通过props接受，二就是父组件通过ref获取到子组件的实例或者元素，调用子组件的方法进行数据传递

2. 子组件向父组件通信 ：

        子组件通过**回调函数**向父组件传递数据。子组件头盖骨this.props 接收父组件的方法后进行调用

3.跨组件通信Context：

        react 中数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于多层级父子关系的组件传值是极其繁琐的。react 提供了context api 来实现在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。React 16.3之后的contextapi 较之前的好用。 

---

3.1 父组件向后代组件通信
                   1.使用 createContext() 创建一个context 对象（内容为需要传递的数据），参数为默认值；
                   2.在父组件外层使用 <.Provider> 将当前 context 的值传递给内部所有的组件树。
                   3.当使用了 <.Provider> 后，不再读取上面的默认值，需要设置 value 属性来进行数据传递。当组件需要读取数据时，
                   4.指定 contextType 读取当前的 context 对象（即刚开始创建的 context）；

---

3.2 多个数据源实现跨组件通信
                   1.使用 import `导入要读取的数据文件`。
                   2. 使用<.Consumer> ，它里面的语法是`函数组件的语法`，函数接收的 `参数` 为当前 createContext() 里的默认值。
                   3.  <.Consumer> 可以嵌套使用，也可以平级使用。

---

3.3 Context 的使用场景
                   1. Context 主要应用场景在于**很多不同层级的组件需要访问同样一些的数据**。请谨慎使用，因为这会使得组件的复用性变差。**如果用组件组合可以解决的问题，就不要使用 Context** 。
                    2.使用 context 的通用的场景包括管理当前的 locale，theme，或者一些缓存数据。

---

3.4 Context 总结
                    1. `React.createContext(defaultValue)` 创建一个 Context 对象。
                    2.  `Class.contextType`，挂载在 class 上的 contextType 属性会被赋值为一个 Context 对象。这能让你使用 `this.context` 来消费最近的 Context 上的数据。你可以在任何生命周期中访问到它，包括 render 函数中。
                   3.`Context.Provider`，接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。
                   4. Context.Consumer，是函数作为子元素（function as a child）这种做法。这个函数参数接收当前的 context 值，返回一个 React 节点。传递给函数的 value 等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。
                   5. `Context.displayName`，浏览器中调试用。
                   6. **Consumer 一般情况下都是和 Provider 同时使用。**
                        6.1 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

---

Redux：

           上面有提到使用 Context 做组件间的通讯会使得组件的复用性变差，如果项目比较复杂、模块比较很多的情况，推荐使用 Redux 来做组件间的通信。
               1.react-redux 提供两个核心的api：
               2. Provider: 提供store，根据单一store原则 ，一般只会出现在整个应用程序的最顶层。
               3.connect: 用于连接展示组件和 redux store。
               4. connect 的语法格式为： connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(component)
                4.1 一般来说只会用到前面两个，它的作用是：
                4.2 把store.getState()的状态转化为展示组件props上的属性
                4.3 把actionCreators转化为展示组件props上的方法
           只要上层中有`Provider`组件并且提供了`store`, 那么，子孙级别的任何组件，要想使用`store`里的状态，都可以通过`connect`方法进行连接。如果只是想连接`actionCreators`，可以第一个参数传递为`null`。        

以上为个人总结，若有不足之处欢迎评论，我会添加上谢谢。