React中组件通信有哪些方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了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`。文章来源地址https://www.toymoban.com/news/detail-624661.html

到了这里，关于React中组件通信有哪些方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！