React-组件通信方式总结

组件间的关系

父子组件：props
兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理、events包
祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(用的少)

组件之间共享数据（通信方式）：

1. props传值：父传子使用props；子组件向父组件传值通过回调函数。

   (1).children props
   (2).render props

2. 多层嵌套组件通信：使用context共享组件树中的数据(生产者-消费者模式)

   • Provider(生产者)：用于生产共享数据的地方。 value:放置共享的数据。
     <Provider></Provider>
   • Consumer(消费者)： 接收Provider产生数据。
     <Consumer></Consumer>

3. 非嵌套组件（兄弟）之间的通信:基于消息订阅-发布者模式 (pubsub)

   这种方式需要安装pubsub-js插件，实现消息的发布和订阅,应用场景是兄弟组件之间传值。执行以下命令安装插件npm install pubsub.js

4. 非嵌套组件（兄弟）之间的通信:events包的使用

（1）npm install events --save
（2）引入 events 包，并向外提供一个事件对象，供通信时使用

5. 集中式管理：使用redux、dva等等

比较好的搭配方式

父子组件：props

兄弟组件：消息订阅-发布、集中式管理

祖孙组件（跨级组件）：消息订阅-发布、集中式管理、conText（开发用的少，封装插件用的多）