在前端开发中，状态管理是必不可少的一部分。伴随着前端技术的发展，出现了多种状态管理方案。其中比较流行且常用的有 Mobx 和 Redux，它们都有其优缺点，选择合适的方案能够提高开发效率和代码可维护性。
Mobx 和 Redux 的区别
Mobx 和 Redux 都是为了处理应用程序状态而产生的方案。但二者在实现上有很大的不同点。
核心概念
Redux 的核心概念是“单向数据流”，所有数据的改变都是通过 dispatch() 函数发送一个 action，然后 reducer 函数来处理这个 action 并返回一个新的 state。
Mobx 的核心概念是“响应式编程”，状态的变化会自动地修改相关联的组件。Mobx 通过使用 @observable 和 @computed 等注解来定义数据监听和自动化的计算属性。
开销
Redux 强制所有的修改都通过 reducer 来实现，这使其更新和渲染过程都比较耗时。但是它的“单向数据流”可以让开发者清晰地追踪数据的变化。
Mobx 利用了 JavaScript 响应式编程的特性来实现数据监听，使得其对于数据修改的响应速度比 Redux 要快。但是由于这种响应式的特性，有时候很难跟踪数据的流向和变化。
开发体验
Redux 的开发体验偏向工程化，需要开发者将逻辑单独实现至固定的 reducer 中。
Mobx 相对来说更加自由，开发者可以自由实现程序的各个逻辑。而且由于它的自动响应特性，开发者不需要显式地修改状态，这样可以提高开发效率。
什么时候该选择 Mobx？
对于中小型的项目，Mobx 可以很好地应付数据处理和响应式 UI 的更新，并且不需要编写大量的 boilerplate 代码。
当需要快速开发功能并迭代时，Mobx 能够很好地提高你的开发效率，并且能够更好地集成 React 组件。
当你的主要目标是响应式编程时，Mobx 可能更适合你。它可以提供更加顺畅的开发体验。
什么时候该选择 Redux？
对于大型项目的管理下，Redux 可以帮助你更好地控制组件间的通信。
当你需要更加精细化控制状态变化时，Redux 是更好的选择。其强调 actions 和 reducer 完全控制你的数据模型。
当你需要管理一个比较复杂的状态数模型时，Redux 也比较适合。可以通过 Redux 的状态树来管理你的数据逻辑。
结论
Mobx 和 Redux 都是非常好的状态管理方案。选择哪一个方案并不是优劣问题，而是根据实际情况而定。如果你主要关心快速迭代和更好的开发体验，那么 Mobx 可能更合适你。如果你主要关心代码架构和在项目规模上的扩展性，那么你可能应该选择 Redux。最后，需要考虑到团队的开发水平和经验，因为不同的方案会有不同的开发难度。
示例代码
Mobx 示例代码
-- -------------------- ---- -------
------ - ----------- ------- -------- - ---- ------
----- --------- -
----------- ----- - --
------- ------------- -
---------------------
-
--------- --- --------------------- -
------ ---------------------- -- ----------------------
-
-
----- ----- - --- -----------
------ ------- -----Redux 示例代码
-- -------------------- ---- -------
----- -------- - ----------
-------- -------------------------- -
------ - ----- --------- ---- -
-
-------- ------------------ - --- ------- -
------ ------------- -
---- ---------
------ ---------- ------ ------------ ---------- -------
--------
------ -----
-
-
----- ----- - -------------------------
------ ------- -----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774d3dd6d66e0f9aaf0c5a2