编程|Web前端:Redux 和 Mobx比较,哪个更好?

编程|Web前端:Redux 和 Mobx比较,哪个更好?

文章图片


所有JavaScript框架都必须处理全局状态的问题 , 即在模型更改后更新界面的问题 。 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 支持函数式编程 , 所以它使用纯函数 。 该函数获取输入 , 返回输出 , 并且除了纯函数之外没有任何其他依赖项 。 纯函数通常使用相同的输入生成相同的输出并且没有副作用 。
【编程|Web前端:Redux 和 Mobx比较,哪个更好?】相比之下 , MobX 受到面向对象编程以及响应式编程的启发 。 它以可观察的形式涵盖了你的状态 。 因此 , 在你的状态下 , 你拥有 Observable 的所有属性 。 数据可能有简单的 setter 和 getter , 但 observable 允许在数据更改后检索更新 。