在前端开发中，状态管理是一个重要的话题。Redux 和 MobX 是目前最流行的两种状态管理库。这两种库都有各自的优缺点，本文将深入探讨 Redux 和 MobX 的不同之处，以及应该如何选择适合自己的状态管理库。
Redux
Redux 是一个用于 JavaScript 应用程序的可预测状态容器。它可以让状态变化变得可控和可追溯。
属性的状态
Redux 将状态存储在单一的 JavaScript 对象中，称为“store”。Redux 应用程序的状态是用纯函数称为“reducers”处理的。这些reducers采用当前状态和要执行的操作（称为“action”）并返回新状态。因为reducers是纯函数，所以它们始终返回相同的输出，给定相同的输入。这种一致性使得 Redux 过程具有可预测性。
Redux 状态管理的核心概念是 "单一的数据源"。这意味着整个应用程序的状态存储在单个 JavaScript 对象中，简化了数据流，使数据流更容易管理。Redux 应用程序的状态是通过使用 action 路由到 reducers 管理的。因为 reducers 是纯函数，所以没有副作用，因此在整个应用程序中始终具有相同的行为。
示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
------------------ -- -------------------------------
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---在上述代码中，我们使用了一个简单的计数器。createStore 函数将 reducer 和 initialState 作为参数，并返回一个 store，用于管理应用程序状态。我们定义了两个 action 类型 “INCREMENT” 和 “DECREMENT” ，dispatch 函数将 action 发送到 reducer 中，通过更改 state 对象返回一个新的状态。我们可以使用 store.getState() 函数获取当前状态，并使用 store.subscribe() 函数在状态更改时打印日志。
优缺点
优点：
- 单一的数据源，状态管理更易于理解和调试。
- 状态更新是可追溯和可预测的。
- 中央式存储使得数据能够通过组件进行共享。
缺点：
- 使用 Redux 通常需要编写更多的代码来管理状态。
- 对于小型应用，使用 Redux 可能会过于笨重。
MobX
MobX 是一个实现了可观察状态和响应式编程的库。与 Redux 不同，MobX 强调了所谓的“目录状态”。
目录状态
MobX 将状态分散在整个应用程序中，组成“目录状态”。组件将仅访问它们感兴趣的数据，没有其他组件所拥有的状态是由他们决定的。这意味着状态不像 Redux 那样具有单一数据源，在它们之间共享状态需要更多的注意。MobX 实现响应式编程，当状态发生变化时，相关组件会被自动重新计算。这避免了手动推动具有依赖关系的更新。
示例代码：
-- -------------------- ---- -------
------ - ------------------ - ---- -------
----- ------- -
----- - --
------------- -
-------------------------
-
---------- -
-------------
-
---------- -
-------------
-
-
----- ------- - --- ----------
---------------------------
-------------------
---------------------------
-------------------
---------------------------在上文中，我们使用了一个简单的计数器。makeAutoObservable 函数包裹一个类，将其转换为 MobX observables 的实例，这意味着类的属性会被 MobX 跟踪，当它们发生变化时，相关的计算将被自动重新计算。在 Counter 类中，我们定义了 count 属性，并且通过 incCount 和 decCount 方法使该属性的值增加和减少。当这个数据发生变化时，相关联的计算也将被自动更新。示例中我们没有任何观察者来监听任何更改。只是为了证明计算更新是自动的。
优缺点
优点：
- 由于 MobX 鼓励进行目录状态管理，它可以使得在开发大型应用程序时更加容易。
- 代码更容易编写和维护，不需要像 Redux 那样编写大量代码。
- MobX 实现响应式编程，自动更新简化了手动更新过程。
缺点：
- 目录状态管理可能使得应用程序更难以调试和维护。
- 状态不在单一数据源中，不易管理。共享状态可能会变得困难。
选择你的状态管理库
无论选择 Redux 还是 MobX，理解其优点和缺点是非常重要的。选择适合您特定项目的状态管理库需要考虑您的项目规模，习惯和团队要求。如果您计划开发的应用程序较小，那么您可能不需要复杂的状态管理，使用 React 内置的状态管理可能已经足够了。如果你在开发中遇到一些状态难以管理的问题，那么这些库提供的状态处理功能可以帮助你轻松解决问题。
无论您选择哪种库，都应该根据其特定的优点和缺点来进行决策。这样可以确保您选择的库具有适合您的特定项目要求的功能，以及简化开发过程的能力。
结论
本文深入探讨了 Redux 和 MobX 的不同之处，并分析了它们的优缺点。我们强调了判断应该使用哪一种库应该考虑项目的大小，习惯和团队要求。对于大型应用程序，Redux 可能是更好的选择。对于中小型应用程序，以及具有目录状态的应用程序，MobX 可能是更好的选择。在任何情况下，选择适合您的项目和团队的库是至关重要的，以确保简化开发过程并加快项目的开发速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774f4316d66e0f9aaf23eda