什么是 Reflux
Reflux 是一个前端应用架构，基于 React 表现层开发的。
它实现了 Flux 架构的思想，而且它的 API 相对简单，使用方便。Reflux 最大的优点是状态管理。
Reflux 中通过在组件的 store 中保存状态，然后，各个 store 中的状态可以互相访问、触发。比如说，一个 store 中的状态的变化，可以触发另一个 store 中的状态的变化。
Reflux 的安装
首先，我们需要安装 Node.js，然后安装 Reflux。使用 npm 包管理工具安装 Reflux，执行以下命令：
npm install @lendinghome/reflux
Reflux 的基本使用
创建 Store
Reflux 中的数据读写都是通过 store 对象来实现的，所以创建 store 是 Reflux 的第一步。
我们假设我们的应用需要保存一个计数器的状态。我们可以在 src 目录下创建一个 CounterStore.js 文件，用以下内容定义两个 store：
-- -------------------- ---- -------
------ ------ ---- ----------------------
------ ----- -------------- - ----------------------
------------
-----------
---
------ ----- ------------ - --------------------
------------ -----------------
------ -
------------ - --
--
------------- -
---------------
---------------------------
--
------------- -
---------------
---------------------------
-
---在上述代码中，我们定义了 CounterActions 和 CounterStore，listenables 字段表示该 store 监听 CounterActions，当 CounterActions 中某个方法被调用时，对应的 onXXX 方法也会被调用。
因为我们需要存储计数器，所以在 CounterStore 的 init 方法中定义了一个初始值为 0 的 counter 状态变量。
我们需要在相应的逻辑中调用 trigger 方法通知 React 组件状态发生了变化。
创建 React 组件
有了 store，我们就可以用 React 组件处理 UI 事件。我们可以在 src 目录下创建一个 Counter.js 文件，用以下内容定义组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ------------- ---- --------------------
------ ------- ----- ------- ------- --------------- -
------------------ -
-------------
---------- - --------- ---
---------------- - ----------------------------
---------------- - ----------------------------
-
------------------- -
---------------- - --------------------------- -- -
-------------------------
---
-
---------------------- -
-------------------
-
------------- -
---------------------------
-
------------- -
---------------------------
-
-------- -
------ -
-----
------- -------------------------------------
--------------------
------- -------------------------------------
------
--
-
-在上述代码中，我们定义了 Counter 组件，并在组件的 constructor 中定义了一个初始值为 0 的 counter 状态变量，并在组件的生命周期 componentDidMount 中，在 CounterStore 上调用 listen 方法，监听 store 中变化，并调用 setState 方法更新组件的状态。在组件的生命周期 componentWillUnmount 中，清空订阅。
封装 increment 和 decrement 逻辑，当用户点击加号或减号按钮时调用 CounterActions.increment() 或 CounterActions.decrement() 更新 store。
最后，返回计数器 UI 组件。
示例代码
Counter.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ------------- ---- --------------------
------ ------- ----- ------- ------- --------------- -
------------------ -
-------------
---------- - --------- ---
---------------- - ----------------------------
---------------- - ----------------------------
-
------------------- -
---------------- - --------------------------- -- -
-------------------------
---
-
---------------------- -
-------------------
-
------------- -
---------------------------
-
------------- -
---------------------------
-
-------- -
------ -
-----
------- -------------------------------------
--------------------
------- -------------------------------------
------
--
-
-CounterStore.js
-- -------------------- ---- -------
------ ------ ---- ----------------------
------ ----- -------------- - ----------------------
------------
-----------
---
------ ----- ------------ - --------------------
------------ -----------------
------ -
------------ - --
--
------------- -
---------------
---------------------------
--
------------- -
---------------
---------------------------
-
---总结
通过本教程，我介绍了 Reflux 的核心概念，及其使用方法。我们通过示例了解了如何创建 store 并在 React 组件中使用它。
Reflux 是一个轻量级的前端应用架构，它为开发者提供了一个便利的状态管理方案，有助于提高页面压力、代码处理复杂度和项目可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e24455e