23、react 使用消息订阅发布机制

react 使用消息订阅发布机制

我们前边做了一个 todoList 的案例，案例里面拆了四个组件，然后涉及到了组件传值。其实当时已经涉及到了兄弟组件传值，但是因为那时候不会兄弟组件传值，所以说呢，就是用了父组组件传值，把组件需要用到的数据放在了最外边的 App 组件，然后通过父子组件传值实现功能的。

关于父子组件通信

父组件传值给子组件：通过 props 传递数据。

子组件传值给父组件：通过 props 传递，要求父组件提前准备一个函数传递给子组件。

关于兄弟组件通信

关于兄弟组件通信，就不用使用父组件作为中转了，而是直接通信，使用的是 消息订阅-发布 机制。

这个时候，我们需要使用一个工具库：PubSubJS

下载

下载这个工具库也很简单，使用 npm 一行命令就下载下来了。

npm install pubsub-js --save

使用

在 github 上面，关于 PubSubJS 使用的说明已经很详细了，然后我们这边就稍微一说了，如果想详细研究的话可以去 github 上去看一下。

// 引入
import PubSub from 'pubsub-js'
// 订阅
PubSub.subscribe('delete', function(msg,data) {
    
    })
// 发布
OubSub.publish('delete', data)

好了，这就是上边的主要内容。