|Web前端：Redux 和 Mobx比较，哪个更好?

文章图片

所有JavaScript框架都必须处理全局状态的问题，即在模型更改后更新界面的问题。 Redux和MobX是两个以各自的方式解决这个问题的状态管理库。状态管理是大型前端应用程序中最具挑战性的问题之一。

【|Web前端：Redux 和 Mobx比较，哪个更好?】尽管有许多技术可以解决状态管理问题， Redux和MobX是用于修复前端应用程序中状态管理的两个主要外部库。
什么是Redux?
Redux 是一个用于状态管理的开源JavaScript库，它与React或Angular等库一起用于构建用户界面。它融合Facebook的Flux架构和受Elm 编程语言影响的函数式编程概念。
Redux的特点/原理
1.它有一个单一的事实来源——它使构建通用应用程序变得简单，因为你的服务器的状态可以被序列化并混合到客户端中，而无需任何额外的编程尝试。单个状态树还使调试或审查应用程序变得更简单。
2.它有一个只读状态——这保证视图和网络回调都不会直接写入状态。相反，他们表现出改变状态的愿望。由于所有更改都是集中的，并以严格的顺序一一发生，因此无需识别隐藏的竞争因素。

3.纯函数用于进行更改 - Reducer 基本上是纯函数，它们在获取前一个状态和一个动作后返回下一个状态。始终返回新的状态对象，而不是修改以前的状态。你可以从单个 reducer 开始，随着应用程序的发展，将其分解为更小的 reducer ，以处理状态树的独特部分。
什么是MobX?
MobX 是一个强大的库，它通过透明的函数式反应式编程 (TFRP) 使状态管理变得简单而灵活。它基本上是一种状态管理解决方案，可以控制应用程序内部的本地状态。
MobX的特点
1.无缝优化渲染——在运行时监控围绕数据所做的所有更改和使用，创建一个收集状态和性能之间所有关系的依赖树。
这可确保你的状态相关计算(例如 React 组件)仅在完全必要时运行。不应该手动优化易出错和次优技术(如备忘录和选择器)的组件。
2.架构自由- MobX 是无主见的，它可以帮助你在任何UI框架之外监控你的应用程序状态。这使得代码解耦，可移植，最重要的是，易于测试。

3.易于使用 - 编写一个简化的、极简的代码来传达你的目的。不需要专门的工具，反应系统能够检测你的所有修订并将它们分发到需要的地方。
这两个库都用于监视 JavaScript 应用程序中的状态。它们通常不连接到像 React 这样的库。它们也可以在其他库中找到，例如 AngularJs 和 VueJs 。但它们与 React 概念很好地结合在一起。
如果你选择其中一种状态管理解决方案，你将不会面临供应商锁定。你可以随时迁移到不同的状态管理解决方案。
Redux 的灵感来自函数式编程 (FP) 的概念。 FP 可以在 JavaScript 中执行，但大多数人来自面向对象的环境，例如 Java ，并且从一开始就难以遵循函数式编程的概念。这可能就是为什么 MobX 作为入门者更容易理解的原因。
由于 Redux 支持函数式编程，所以它使用纯函数。该函数获取输入，返回输出，并且除了纯函数之外没有任何其他依赖项。纯函数通常使用相同的输入生成相同的输出并且没有副作用。
相比之下， MobX 受到面向对象编程以及响应式编程的启发。它以可观察的形式涵盖了你的状态。因此，在你的状态下，你拥有 Observable 的所有属性。数据可能有简单的 setter 和 getter ，但 observable 允许在数据更改后检索更新。