在前端开发中，状态管理是一项非常关键的工作。针对不同的场景和需求，目前有多种状态管理方案可供选择。在 Angular2 中，除了常见的 Redux 状态管理库 ngrx，我们还可以使用 MobX。与 ngrx 相比，MobX 具有以下优势。
状态更新更加自然
在 ngrx 中，我们需要通过创建 action 和 reducer 来实现状态更新。不同的组件需要定义不同的 action 和 reducer，可能会导致代码量过大、不易维护。而在 MobX 中，状态更新则更加自然简洁，不需要过多的模板代码。下面是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ---------------
------------
--------- ---------------
--------- -
--------------------
------- --------------------------------
--
--
------ ----- ----------- -
----------- ----- - --
----------- -
-------------
-
-在这个示例中，我们使用了 MobX 的 observable 装饰器来定义了一个可观察的 count 属性，并在 increment 方法中直接更新了它。这比起 ngrx 的 action + reducer 来说更加直观自然。
性能更高
在大型应用中，高性能的状态管理非常关键。在 MobX 中，只有被需要的状态才会被更新。而在 ngrx 中，每个状态更新都需要遍历整个状态树。这就导致了当应用规模变大时，ngrx 的性能可能会受到严重影响。
学习成本更低
与 ngrx 相比，使用 MobX 进行状态管理的学习成本更低。MobX 的架构更加简单直观，而且不需要掌握 Redux 的各种概念和工具。这使得我们可以更快地上手并编写出高质量的代码。
工作示例
以下是一个示例，我们将比较 MobX 和 ngrx 如何管理状态。
我们创建一个 todoList 小应用程序。有以下一个简单的 UI 界面用于输入待处理的任务并点击添加按钮可以添加 todos。
通过运行这两个示例并在控制台中查看日志，我们可以看出 MobX 在更新状态时的速度明显比 ngrx 更快。
MobX 示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ---------------
--------- ---- -
--- -------
------ -------
-
------------
--------- -----------
--------- -
-------- ---------
---- ----------- ---- -- -------
-------- ---------- ---------
------- -----------------------------------------
------
------ --------------------- ---------------- ----- --
------- ----------------------------
-
--
------ ----- ------------- -
----------- ------ ------ - ---
----------- ------- - ---
----- -
----- ----- - --- -----------------
-----------------
--- ------
------ ------------
---
------------ - ---
-
---------------- ------- -
---------- - ---------------------- -- ------- --- ----------
-
-ngrx 示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ ------ - ---- --------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
------ - --------- ---- - ---- --------------------
------ - -------- ---------- - ---- -----------------
------------
--------- -----------
--------- -
-------- ---------
---- ----------- ---- -- ------ - -------
-------- ---------- ---------
------- -----------------------------------------
------
------ --------------------- ---------------- ----- --
------- ----------------------------
-
--
------ ----- ------------- -
------- -------------------
------- - ---
------------------- ------ ---------------- -
----------- - -----------
----------------
--------- -- ---------------------
--
-
----- -
----------------------- ---------
--- --- -----------------
------ ------------
----
------------ - ---
-
---------------- ------- -
----------------------- ------------ --- -------- ----
-
-结论
通过本文的讲解和示例代码可知，相比 ngrx，MobX 更适应 Angular2 的状态管理。因此，在选择状态管理方案时，我们可以根据具体项目需求选择不同的建议方案。如果您希望在开发中获得更好的表现和较小的开发成本，建议使用 MobX 进行状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6750529ffbd23cf890768ec2