前言
在前端开发中，使用观察者模式来监听事件已经变得越来越普遍。React 是一个基于组件化的框架，对于组件间的交互，使用观察者模式可以使代码更加简洁且易于理解。
在本文中，我们将介绍一个方便的 npm 包，即 react-action-observer。这个包提供了一种在 React 组件之间使用观察者模式的简单方法，同时具有灵活性和可扩展性。本文将会深入讲解 react-action-observer 的使用方法，并提供实际的示例代码，希望对您在使用 React 进行前端开发工作时有所帮助。
什么是 react-action-observer
react-action-observer 是一个用于 React 组件间通信的轻量级 npm 包。它是基于观察者模式实现的，可以让一个组件监听另一个组件的动作，并实时更新相应的状态。
使用该包需要注意的是，您需要在项目中已经安装了 React 和 prop-types 库，这两个库是 react-action-observer 的前置依赖。
react-action-observer 的使用
安装
在命令行中使用以下命令可以安装 react-action-observer：
npm install react-action-observer
引用
使用 react-action-observer 需要导入它的两个组件：ActionObserver 和 ActionEmitter：
import {ActionEmitter, ActionObserver} from 'react-action-observer'传递事件
让我们来看一个示例，展示了如何在一个子组件中传递一个事件，来让它的父组件实时更新状态。
-- -------------------- ---- -------
----- -------------- - -- -- -
------ -
-----
------- ----------- -- ------------------------------ ---------------
------- ----------- -- ------------------------------ ---------------
------- ----------- -- ------------------------------ ---------------
------- ----------- -- ------------------------------ ---------------
------
-
-这是一个名为 ChildComponent 的组件，它有四个按钮。每个按钮都触发一个不同的事件，由 ActionEmitter 发送给 ActionObserver。
其中 ActionEmitter.emit() 方法用于传递事件和相关参数，它需要接收两个参数，第一个是事件的名称，第二个是任意数量的事件参数。
监听事件
接下来，我们来看如何让父组件在 ChildComponent 中发出的事件发生变化时实时更新状态。
-- -------------------- ---- -------
----- --------------- - -- -- -
----- -------- ---------- - ------------
------ -
-----
-----------------
--------------- --------------- ------------ -- ---------------- -- ---- - -------- --
--------------- --------------- ------------ -- ---------------- -- ---- - -------- --
--------------- --
------
--
--我们首先定义了一个父组件 ParentComponent，在其中我们使用了 useState 方法定义了一个 number 状态。然后我们在页面上显示了这个状态，并为它创建了两个 ActionObserver 组件。
这两个组件分别监听了事件 increase 和 decrease，并在收到事件后映射成修改 number 状态的方法，将它们绑定到 do 属性上。
on 属性用于指定要监听的事件名称，而 do 属性则指定收到事件后应该执行的操作。
同步多个状态
如果我们需要在「子-父-子」关系的多个组件之间同步状态，那该怎么办呢？这里是一个方法：
-- -------------------- ---- -------
----- ---------- - -- -- -
----- ----------- - -- -- -
---------------------------- ---- -- ------ ----
-
------ -
------- ----------------------------------
-
-
----- ---------- - -- -- -
----- ------- --------- - -----------
--------------------------- ----- ------- -- -
-- --- --- -- -
---------------
-
--
------ -
------------------
-
-这里我们创建了两个组件 ChildComp1 和 ChildComp2。这两个组件之间相互独立，但我们希望在 ChildComp1 中修改值后，ChildComp2 中也能实时更新相应的状态。
在 ChildComp1 中，我们用 ActionEmitter.emit() 方法发送了一个名为 change 的事件，并传递了一个包含 id 和 value 两个属性的对象作为事件参数。注意到这里我们需要将 id 和 value 组成对象传递给 ActionEmitter.emit() 方法。
在 ChildComp2 中，我们使用了 ActionObserver.on() 方法来监听 change 事件。当事件被触发时，我们通过解构传递的参数对象，从中取出并判断 id 属性，如果符合我们预设的合法值，则将 value 属性值更新到本地状态中。
取消监听和动态监听
如果我们想取消对某个事件的监听，可以使用 ActionObserver.off() 方法：
ActionObserver.off('increase', onIncrease)在其中我们可以传递需要取消的事件名称和其对应的方法。这里的 onIncrease 是之前绑定到 increase 事件的方法。
另外，react-action-observer 还支持动态监听，即在组件渲染时根据传递的参数进行监听：
<ActionObserver on={event} do={(args) => console.log(args)} />在上例中，on 属性指定了一个变量 event，这个变量的值在组件被渲染时才能得到。这样，我们就可以根据传递的事件来监听相应的行为，从而实现更加灵活的组件间通信。
结语
react-action-observer 是一个非常方便且易于使用的 React 组件通信解决方案。通过使用 ActionEmitter 和 ActionObserver，我们可以很容易地在组件间进行事件的传递和监听，从而实现状态的实时更新，提高开发工作效率。
本文中，我们详细介绍了 react-action-observer 的使用方法，并提供了多个实际示例代码，希望对您在使用 React 进行前端开发工作时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005683081e8991b448e4497