Vexo

React组件间的通信

2017-09-02

React 是以组件组合的形式组织的,组件因为彼此是相互独立的。所以在嵌套关系上就会有三种不同的可能性:父组件向子组件通信、子组件向父组件通信和没有嵌套关系间的组件通信。

1.父组件向子组件通信

React 的数据流动是单向的,所以父组件向子组件通信也是最常见的方式。父组件通过 props 向子组件传递需要的信息。

2.子组件向父组件通信

  • 利用 props 传递回调函数

    子组件在 setState 的时候调用父组件传递过来的函数

  • 利用全局事件

    利用 Node 自带的 events 模块

3.跨级组件通信

  • 通过 context 来实现跨父子组件间的通信
  • 层层传递 props

4.没有嵌套关系间的组件通信

只能同全局事件机制,在 componentDidMount 事件中,如果组件挂载完成,订阅事件;当组件卸载的时候,在 componentWillUnmount 中取消事件的订阅。

Pub/Sub 模式实现的过程很简单,即利用全局对象来保存事件,用广播的方式去处理事件,但容易带来逻辑混乱的问题。

Tags: react
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章