所有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 支持函数式编程,所以它使用纯函数。该函数获取输入,返回输出,并且除了纯函数之外没有任何其他依赖项。纯函数通常使用相同的输入生成相同的输出并且没有副作用。
相比之下,MobX 受到面向对象编程以及响应式编程的启发。它以可观察的形式涵盖了你的状态。因此,在你的状态下,你拥有 Observable 的所有属性。数据可能有简单的 setter 和 getter,但 observable 允许在数据更改后检索更新。
发表评论 取消回复