前端框架现在已经非常复杂了，因此，数据管理开始变得非常重要。Redux 和 Mobx 是两种最常用的前端数据管理方案。本文将介绍这两种方案的优缺点，并通过示例代码进行比较。
什么是 Redux？
Redux 是一种状态管理库，它可以使你更好地管理应用程序的状态。它是一个单向数据流的方案，数据更新的流程会经过三个步骤：action、reducer 和 store。
- Action：是一个包含两个属性的对象，其中
type属性将用于确定该操作的类型，而payload属性通常包含传递给操作的数据。
const increment = {
type: 'INCREMENT',
payload: 1
}- Reducer：一个操作函数，接收先前的状态，并使用操作与其相关的新数据更新状态，然后返回一个新的状态。
-- -------------------- ---- -------
----- ------------ - -
------ -
-
----- ---------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --------------
-
--------
------ -----
-
-- Store：用于存储整个应用程序的状态。无论何时，当一个操作被分派到操作中，都会触发 store 的更新。store 中的状态是不可变的，因此它会在每次更新时创建一个新的状态对象。
import { createStore } from 'redux'
const store = createStore(incrementReducer)Redux 的优点：
- 单向数据流：Redux 强制单向数据流。这使得应用程序中的数据更新变得更加可预测，并使其更易调试。
- 可测试性：Redux 代码是可测试的，因为它们不依赖于许多变量或其他的条件。
- 易于维护：由于Redux只允许特定的方式来更新状态，因此它更容易维护代码的一致性和可靠性。
- 动态更新：通过使用 Redux，您可以轻松地动态加载数据并更新应用程序。因此，Redux 是实现灵活性和可扩展性的有力工具。
Redux 的缺点：
- 样板代码过多：Redux 的整个过程需要编写大量的代码。对于大型的应用程序来说，这可能会变得相当繁琐。
- 多层的嵌套：在使用 Redux 时，您需要完全确定一个操作和其更新的状态之间的联系。因此，它可能导致多层嵌套的问题。
什么是 Mobx？
Mobx 是一种简单、可扩展的状态管理库，用于在前端应用程序中管理数据。它的核心思想是可观察数据模式，这意味着在数据未来发生更改的时候，它是主动“通知”的。Mobx 可以将你的应用程序的状态转化为可观察的状态。在 Mobx 中，您的代码几乎可以像普通的 JavaScript 代码一样简单。
Mobx 的优点：
- 简单性：由于 Mobx 可以使代码更加简单，因此您可以更快地为您的应用程序创建新特性。
- 灵活性：由于 Mobx 处理应用程序的状态，因此它比 Redux 用起来更容易。 它还允许您更改应用程序的工作方式。
- 极少的样板代码：Mobx 不需要特别的“网络结构”，因此需要编写的样板代码几乎为零。
Mobx 的缺点：
- 大型应用困难：如果您正在开发一个大型的应用程序，则使用 Mobx 可能变得相当困难。适用于大型应用的 Mobx 最佳实践并不明确。
- 可测试性差：对于使用 Mobx 的应用程序，测试非常困难。在顶部提供 mock 值，你需要为每个测试重复此过程。
比较
让我们看看这两种方案在一些代码示例上的比较。
Redux
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ------------ - -
------ -
-
----- --------- - -
----- ------------
-------- -
-
----- --------- - -
----- ------------
-------- -
-
----- ---------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --------------
-
---- ------------
------ -
---------
------ ----------- - --------------
-
--------
------ -----
-
-
----- ----- - -----------------------------
------------------ -- -
-----------------------------
--
------------------------- -- - ------ - -
------------------------- -- - ------ - -Mobx
-- -------------------- ---- -------
------ - ----------- ------- -------------- - ---- ------
----- ------- -
----- - -
------------- -
-------------------- -
------ -----------
---------- -------
---------- ------
--
-
----------- -
------------
-
----------- -
------------
-
-
----- ------- - --- ---------
--------------- -- -可以看出，Mobx 非常易于使用，并且需要比 Redux 需要更少的代码来实现一个计数器。但是，当数据变得更加复杂时，Redux 有一种更优雅的方式来处理变更。
当我们在应用程序中引入更多的数据时，特别是当这些数据之间存在嵌套关系时，Redux 非常适合。 另一方面，如果您的应用程序比较简单，那么 Mobx 是最佳选择。
结论
Redux 和 Mobx 都是非常有价值的前端数据管理方案，但是它们适用于不同的用例。 如果您开发一个大型的应用程序，那么最好的选择是 Redux。 另一方面，如果您正在开发简单的应用程序或如果您不想编写很多不必要的代码，那么 Mobx 是最佳选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672a113bddd3a70eb6cf18c0