React组件之间的通信方式

一、通过props传递

• 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
• 通过props可以传递一般数据和函数数据, 只能一层一层传递，即单向单层传递
• 一般数据

          父组件传递数据给子组件-->子组件读取数据

• 函数数据

         子组件传递数据给父组件-->子组件调用函数

总结：

父子组件之间的通信，使用props属性。其中只能由父组件传递到子组件（单向）。如果子组件向要传递数据给父组件，只能通过回调函数的方式进行。

兄弟组件不能直接通信，只能通过共有的父组件间接完成通信。

使用props进行通信适用于组件的层级不是很多，传递的数据不是很复杂的情况。

二、消息订阅(subscribe)-发布(publish)机制

接收数据方为消息订阅（subscribe）者，数据发布（产生）方为消息发布（publish）者。

这种方式可以跨层级进行通信。使得任意两个组件通信成为可能。

在JavaScript中，使用第三方库 PubSubJS完成消息订阅-发布机制。

文档： https://github.com/mroderick/PubSubJS

PubSubJS使用方法：

1. 安装

npm install pubsub-js --save

2. 使用

// 引入
import PubSub from 'pubsub-js'

 

// 订阅
PubSub.subscribe('delete', function(msg, data){ });

 

// 发布消息
PubSub.publish('delete', data)

主要API

PubSub.subscribe(topic, callback)

订阅消息

参数：

topic

消息名称

callback

收到消息时的回调处理函数，接收两个参数：

msg

消息名称

data

发布者发出的数据

返回值

返回一个token，可以用于取消订阅

 

PubSub.publish(topic, data)

发布消息

参数：

topic

消息名称，消息发布者和订阅者所定义的消息名必须一样，否则接收不到消息

data

发布者发出的数据

 

PubSub.unsubscribe(token)

用来取消消息订阅

参数：

token

subscribe()的返回值

三、Redux

这个就不用过多介绍了，大名鼎鼎的redux，一个独立的专门用于状态管理的库。结合React能够完成大型复杂的项目。