什么是 react-bus?
react-bus 是一款基于 React 框架开发的状态管理库，它可以实现组件之间的数据通信，不管两个组件的关系是父子、兄弟还是祖先后代，都可以直接进行数据传输，而不需要考虑它们之间的层级。
安装 react-bus
你可以在命令行中使用 npm 命令安装 react-bus：
npm install react-bus
使用 react-bus
1. 创建 app.js 文件
在你的项目根目录中创建一个 app.js 文件。这个文件是用来管理所有的组件，相当于我们常用的容器组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ------------
----- --- ------- --------------- -
------ -- -
------ -
-----
-----
- ------------------- -
------
------
--
-
-
------ ------- ----在这个文件中，我们通过 import 指令导入了 react 和 react-bus 库，创建了一个 App 组件，并在它内部添加了一个 Bus 组件。Bus 组件相当于一个中央数据总线，可以把它看作一个全局的事件监听器。
2. 创建需要进行数据通信的组件
在你的项目的任何地方，你都可以创建需要进行数据通信的组件。假设我们有两个组件，一个是 Sender 组件，一个是 Receiver 组件。他们需要相互传递数据。我们先来看一下 Sender 组件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- ------------
----- ------ ------- --------------- -
----------- ------- -
-------------
---------- - -
-------- --------------
--
-
----------- -- -
------------------------- ------------------
-
------ -- -
------ -
-----
---- ------------------ -----
------- --------- --------------------------- -----------------
------
--
-
-
------ ------- -------在 Sender 组件中，我们使用了 Bus.emit 方法来向全局总线发送一个事件，这个事件的名称是 changeMessage，同时需要传递的数据是新的 message。当用户点击按钮时，handleClick 方法会被调用，这时候将会触发 changeMessage 事件，并把 message 变为新的内容。
Bus.emit('changeMessage', '努力一定有回报，成功就在明天');接下来我们看一下 Receiver 组件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- ------------
----- -------- ------- --------------- -
----------- ------- -
-------------
---------- - -
-------- --
--
-
----------------- -- -
----------------------- -------------------------------------
-
------------------- ------------ -
---------------
-------- ----------
---
-
------ -- -
------ -
-----
---- ------------------ -----
------
--
-
-
------ ------- ---------在 Receiver 组件中，我们调用了 Bus.on 方法来监听全局总线中的 changeMessage 事件。当这个事件被触发时，handleChangeMessage 函数将会被调用，并把传入的新的消息存储在组件的状态中。最终，message 的值会被显示在组件的界面上。
Bus.on('changeMessage', this.handleChangeMessage.bind(this));现在，当用户点击 Sender 组件中的按钮时，Receiver 组件中的 message 将会被更新。这就实现了两个组件间的数据通信。
3. 解除事件监听
如果你希望在某个组件移除它的事件监听器，可以使用下面的方法：
Bus.off('eventName', listener);需要传递两个参数，一个是事件名，一个是监听器函数。这个函数需要和之前的监听器函数是同一个函数才能删除。
4. 示例代码
下面是一个完整的示例代码，你可以运行这个代码来验证 react-bus 的用法：
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ------------
----- --- ------- --------------- -
------ -- -
------ -
-----
------ ------------------- -------
------
--
-
-
----- ------ ------- --------------- -
----------- ------- -
-------------
---------- - -
-------- --------------
--
-
----------- -- -
------------------------- ------------------
-
------ -- -
------ -
-----
---- ------------------ -----
------- --------- --------------------------- -----------------
------
--
-
-
----- -------- ------- --------------- -
----------- ------- -
-------------
---------- - -
-------- --
--
-
----------------- -- -
----------------------- -------------------------------------
-
-------------------- -- -
------------------------ -------------------------------------
-
------------------- ------------ -
---------------
-------- ----------
---
-
------ -- -
------ -
-----
---- ------------------ -----
------
--
-
-
----- ------------ ------- --------------- -
------ -- -
------ -
-----
------- --
--------- --
------
--
-
-
------ ------- -------------在这个示例代码中，我们创建了一个 App 组件作为所有组件的容器，然后创建了 Sender 和 Receiver 两个组件。最后在 App 组件中添加了 Sender 和 Receiver。
当用户点击 Sender 组件中的按钮时，Receiver 组件中的 message 将会被更新，这就实现了两个组件间的数据通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb484b5cbfe1ea06112d2