React组件间的通信

2019/11/17 JSReact

🌙 父传子

在父组件中初始化数据,将子组件的props属性值通过父组件的状态state来管理,父组件通过调用setState方法来更新子组件数据:

🌙 子传父

在子组件中初始化数据,在子组件构造方法中通过props调用父组件回调函数设置setState,更新父组件的state状态,从而更新父组件数据:

🌙 任意组件

任意组件间的通信,若不借助其他库,一般借用消息中间件和状态管理来实现:

See the Pen React组件间的通信-消息接口 by zkkysqs (@zkkysqs) on CodePen.

消息中间件的模式非常简单,利用了观察者模式,将两个组件之间的耦合解耦成了组件和消息中心+消息名称的耦合 ,但为了解耦却引入全局消息中心和消息名称,消息中心对组件的侵入性很强 ,谨慎使用。

🌙 单向数据流

现在,我们已经知道:

  • 父传子:父组件通过props直接赋值的形式实现,更新数据使用state管理状态,直接调用this.setState方法。
  • 子传父:子组件通过props调用父组件的方法,从而间接调用父组件的this.setState方法将子组件的数据传给父组件,并更新父组件视图。

单向数据流是指数据的流向只能由父组件通过props将数据传递给子组件,不能由子组件向父组件传递数据,要想实现数据的双向绑定,只能由子组件接收父组件props传过来的方法去改变父组件的数据,而不是直接将子组件的数据传递给父组件。

🌙 更进一步

如果项目非常大,上面方案都不合适,那你可能需要一个状态管理工具,通过状态管理工具把组件之间的关系,和关系的处理逻辑从组建中抽象出来,并集中化到统一的地方来处理,Redux (opens new window)就是一个非常不错的状态管理工具。

除了Redux (opens new window),还有Mobx (opens new window),Rematch,reselect等工具,这些都是用来解决不同问题的,只要根据自己的场景选择合适的工具就好了。