react是组件化的框架，组件实例间作用域是互相隔离的，所以组件间的通信就变成了开发过程中常常要解决的问题，根据场景可以分为：

　　父子组件通信

　　非父子组件通信

　　跨组件传参

　　组件状态共享

　　a. 父子组件通信

　　首先就是最常见的父子组件通信，比如在一个表单组件中创建了一个自定义的表单控件，这就形成了父子组件关系。

　　自定义表单控件这个子组件是需要父组件将value值传递进去来控制子组件内部自有的数据的，这时父组件的Form可以将数据以value属性的形式传递到子组件身上，子组件在利用value属性来控制自身的状态(监听属性变化，属性变化后更改自己状态)。

　　父组件也需要将更改value的onChange方法传递给子组件，子组件在需要更改表单状态的时候执行onChange事件。

　　还有一种情况就是父组件调用子组件的方法的时候，比如在使用echarts等第三方组件的时候，往往需要利用ref对其进行标记，拿到组件实例后，父组件主动调用图表等子组件的方法，例如resize，refresh等。

　　需要注意的是，如果子组件是函数组件的话，父组件利用ref标记之后，子组件需要利用React.forwardRef来进行ref转发，子组件内部也可以利用useImperativeHandle来对ref进行扩展。

　　这就是父子组件通信的方式：父传子，子传父，父组件调用子组件方法。

　　b.非父子组件通信

　　首先，如果通信的组件较少且组件关系较近，可以采用状态提升的方式，将非父子组件通信变成父子组件通信，例如我们在做数据展示页面的时候，往往会有两个组件，上面一个搜索过滤组件filter，下面又一个表格展示的组件table，当然搜索过滤filter组件执行一些动作的时候要通知table组件去根据条件再次获取数据。

　　我们就可以抽象出过滤条件的数据并维护在父组件身上，将数据传递给两个组件，table组件监听数据变化后重新调用接口，filter组件用户操作后调用父组件传入的方法来更新父组件数据。

　　这样就可以实现功能。

　　如果需要通信的组件非常的多，关系也比较复杂，我们如果用状态提升的话可能会导致最近将状态提升到了最外面的组件上，不合适，此时数据的传递也变得复杂， 使用成本太高，此时就可以采用event-bus，事件总线的方式。

　　比如，在一个页面中有好几个表单组件在收集相关的信息，下面有一个按钮， 按钮点击之后需要让所有的表单组件都去进行提交，此时我们就可以采用event-bus的形式，各个表单组件都绑定同一个事件，事件处理程序中进行提交，点击按钮后触发这个事件就可以。

　　c. 跨组件传参

　　如果我们有一些数据需要像内部很多的子系组件传递的时候，就可以利用Context进行传递，提供数据或者方法的父级组件利用Context对象的Provider组件来提供数据和方法，子系组件通过Consumer或者useContext来取得Provider提供的数据。

　　例如在主题信息传递的时候，还有有的时候在小范围的几个组件结构中使用useReducer来创建store，此时也可以搭配context来进行state和dispatch的传递。

　　d.组件间状态共享

　　针对用户信息、登录状态、全局的某些配置参数等等需要在很多组件间共享，此时利用上面几种组件通信方式会导致数据流混乱，逻辑不清晰，大部分情况下就会采用redux、reduxjs/toolkit来解决状态共享的问题。

上一篇

使用IE浏览器遇见过哪些兼容问题？

下一篇

ES6新增的方法有哪些？