状态管理在 React 开发中扮演着至关重要的角色，学习并掌握一种好的状态管理方案能够提高开发效率，增强代码质量。Redux 作为 React 官方推荐的状态管理方案受到了广泛的使用和关注，而 MobX 则相对较新，但因其简单易用的特点也逐渐受到开发者的青睐。本文将从 Redux 到 MobX 逐一分析其内部工作原理，以帮助读者更深入地理解 React 的状态管理方案。
Redux
Redux 是一个用于 JavaScript 应用的可预测状态容器。它帮助构建应用程序的可预测状态，并且易于测试和维护。
Redux 的三个原则
Redux 的设计哲学基于三个核心原则：
- 单一数据源
整个应用的 state 被存储在单个对象中，并且这个对象只能通过特定的 action 来修改。这种方式使得状态变化可以被可靠地追踪，而不需要去查找代码中的不同地方。
- 状态是只读的
Redux 中的状态不会被直接修改。相反，你需要通过分发 action 来描述状态的变化。
- 使用纯函数来执行修改
所有的修改都通过 reducers 来描述，并且，这些 reducers 都是纯函数。意味着，给定相同的输入，它们总是返回相同的输出。这种方式使得 Redux 的状态修改可预测，并且可以在稍后的一些时间重播。
打造 Redux 应用，主要分为三个部分：store，action，和 reducer。
Store
Store 是应用状态的单一来源。整个应用中所有的 state，以及它的变化，必须被存储在 store 中。
Action
Actions 是一个描述状态变化描述的对象，一般是以简单的 JavaScript 对象的形式来表示。每个 action 必须有一个 type，用来表明它具体代表的是什么变化。例如：INCREASE、DECREASE。
Reducer
Reducer 是用来描述状态变化的。它接收先前的 state 和一个 action 对象作为输入，然后返回新的 state。
以下示例展示了一个简单的 Redux 应用实现：
-- ----------
------ ----- -------- - -----------
------ ----- -------- - -----------
------ ----- --------------- - -- -- --
----- --------
---
------ ----- --------------- - -- -- --
----- --------
---
-- -----------
------ - --------- -------- - ---- ------------
----- ------------ - -
-------- --
--
----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ - -------- ------------- - - --
---- ---------
------ - -------- ------------- - - --
--------
------ ------
-
--
-- --------
------ - ----------- - ---- --------
------ -------------- ---- -------------
----- ----- - ----------------------------
------ ------- ------在上面的例子中 counterReducer 就是一个纯函数，接收旧的 state 和 action 两个参数，根据不同 type 类型做不同的处理，返回新的 state。最后用 createStore 方法生成 store 对象。
优缺点
Redux 是一个强大且可扩展的状态管理库。它的状态变化很容易被追踪，这个过程的设计以及交互模式已经深刻地影响了 JavaScript 开发者的思考方式。但是使用 Redux 时，需要编写大量的模板代码，基于它的设计哲学，Redux 可能会过度被使用。
MobX
MobX 是什么？简单地说，MobX 是一种 JavaScript 状态管理库，是一种状态自动管理工具，专注于使应用程序状态与 React 组件保持同步。
实现原理
MobX 的三个核心概念是：Observable State，Computed Value 和 Reactions。
Observable State
Observable State 是可观察对象，也称为可观察状态。Observable State 是应用程序状态的容器，将状态数据和依赖它的所有组件连接起来。
Observable State 只是普通的对象，但通过 MobX 的 observable 方法能够将它们转换为可观察对象。
Computed Value
Computed Value 是可以从多个 Observable State 衍生的新值。Computed Value 可以自动追踪其依赖变更，它们通过 Observable State 的变化动态计算自己的值。
一个 Computed Value 可以是只读的，也可以被用户更新，但更新不会对 Observable State 进行操作。
Reactions
Reaction 是对 Computed Value 或 Observable State 的监听器。当它所监听的 Observable State 或 Computed Value 发生改变时，Reaction 会被重新计算。
MobX 通过 observer 方法将 React 组件转换为 Reactions。它会追踪组件使用的所有 Observable State 和 Computed Value，当它们发生变化时，触发组件重新渲染。
MobX 还提供了 action 方法用于更新 Observable State。组件中使用的所有 action 都会被封装为一个事务，如果该 action 修改多个 Observable State，只有在所有 Observable State 发生改变后才会通知监听 Computed Value 或组件重新渲染。
以下示例展示了一个使用 MobX 的 React 组件：
-- ------- -----
------ - ----------- ------ - ---- -------
----- ------------ -
----------- ----- - --
-------------
--------------- -
---------- -- --
-
-------------
--------------- -
---------- -- --
-
-
-- ------- ---------
------ ----- ---- --------
------ - -------- - ---- -------------
------ ------------ ---- -----------------
---------
----- ------- ------- --------------- -
-------------- - -- -- -
-----------------------------
-
-------------- - -- -- -
-----------------------------
-
-------- -
------ -
-----
---------- -------------------------
------- -----------------------------------------------
------- -----------------------------------------------
------
--
-
-
------ ------- --------在上面的例子中 CounterStore 就是一个 Observable State，其中 count 是一个可观察状态，increaseCount 和 decreaseCount 是 action 方法。Counter 组件通过 observer 方法被转换为 Reactions 组件。
优缺点
MobX 通过自动追踪数据的变更和自动渲染组件，大大简化了 React 应用的状态管理。相对于 Redux，MobX 更易于使用和理解，同时由于其简单易用的特性而受到越来越多的关注。但是，并不是所有应用场景都适合使用 MobX，它的设计哲学或许与某些特定的业务需求有冲突。
总结
Redux 和 MobX 都是用于 React 状态管理的强大工具，Redux 更侧重于可预测和可控的流程，而 MobX 更注重在代码结构和设计上的灵活性和方便性。对于一个个人或团队对于建立企业级应用的状态管理，Redux 或许更合适；对于更加短平快、易于团队接受，且对性能要求甚高的项目，MobX 也许是更好的选择。
无论使用 Redux 还是 MobX，我们总结一下：
- 在 action 中只包含必要的信息
- 使用无副作用的纯函数来执行 state 树的更新
- 每个 action 都会导致 state 的相应更新，必须被正确地处理
我希望通过本文的介绍，能够让读者更全面、更深入地了解到 React 状态管理的适用场景和手段，并能够选择合适的方法构建自己的 React 应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66444337d3423812e422412c