Web 应用程序开发人员通常正在寻找在其应用程序中管理状态的有效方法。 状态管理是开发 JavaScript (JS) 应用程序的重要组成部分，尤其是 React 和 React Native 应用程序。 MobX 是 React 开发人员可用于状态管理的众多工具之一。
Web 应用程序中的状态管理是指在图形用户界面 (GUI) 中管理一个或多个用户界面 (UI) 控件的状态，例如文本字段、确定按钮、单选按钮等。 在这种 UI 编程技术中，一个控件状态依赖于其他 UI 控件的状态。
我们将看看 MobX 是什么，它做什么，以及它是如何工作的。
MobX 是什么？
移动版 是一个久经考验的库，它通过透明地应用函数式反应式编程使应用程序状态管理变得简单和可扩展。 其久经考验的真正开源独立库可以轻松编写简单的代码，将应用程序的反应性数据连接到用户界面。 MobX 使将应用程序的反应性数据与 UI 连接起来很简单。
MobX 最引人注目的特性之一是它遵循函数式反应式编程 (FRP) 实现并通过确保所有派生自动执行来阻止不一致的状态。 虽然它不需要任何框架或前端库来工作，但在 React、Vue 和 Angular 等流行的前端 JavaScript 框架中有实现。
我们的重点将放在 MobX 的 React 实现上。
ReactJS 中的 MobX 是什么？
MobX 和 React 的组合对开发人员来说非常强大。 React 通过提供工具将应用程序状态转换为可渲染元素树来渲染应用程序状态。 MobX 提供了存储和更新 React 然后使用的应用程序状态的方法。
React 和 MobX 都为应用程序开发中的常见问题提供了非常优化和独特的解决方案。 React 提供了使用虚拟文档对象模型 (DOM) 以最佳方式呈现 UI 的机制，该模型减少了代价高昂的 DOM 突变。 MobX 提供了一些工具，可以使用反应式虚拟依赖状态图有效地将应用程序状态与您的 React 组件同步，该状态图仅在严格需要时更新并且永不陈旧。
这 MobX 的文档 请注意，它在概念上将您的应用程序视为电子表格。 使用 MobX 和 React，应用程序开发人员可以使用应用程序状态、派生、反应和动作的核心概念。
应用状态
通过应用程序状态，对象、数组、原语和引用的图形构成了应用程序的模型。 例如，在电子表格主题中，这些值将是您的数据单元格。
推导
派生是可以从应用程序的状态自动计算的任何值。 这些计算值的范围可以从简单的值（如列表中未完成的待办事项的数量）到复杂的值（如待办事项的可视化 HTML 表示）。 应用程序的这些部分是电子表格的公式和图表。
反应
反应类似于推导，主要区别在于这些函数不产生值。 相反，它们会自动运行以执行一些通常与输入和输出 (I/O) 相关的任务。 例如，反应确保 DOM 更新，或者在正确的时间自动发出网络请求。
行动
最后，行动是改变状态的所有事物。 MobX 确保所有派生和反应自动处理由您的操作引起的应用程序状态更改，同步且无故障。
反应 MobX 示例
下面是使用 MobX 构建一个简单计时器的代码。
- 这个来自 MobX 的例子展示了一个围绕 TimerView React 组件的观察者包装器。
- 包装器会自动识别渲染依赖于 timer.secondsPassed observable（形成你的 MobX 应用程序的反应状态），即使这种相关性没有明确定义。
- 当该字段在未来得到更新时，反应性系统将重新渲染组件。
- 每个 onClick 或 setInterval 事件都会调用一个动作，比如 myTimer.increase 或 myTimer.reset，它更新可观察状态 (myTimer.secondsPassed)。
- 可观察到的状态变化被精确地传播到所有依赖于变化的计算和副作用，比如 TimerView。
import React from "react" import ReactDOM from "react-dom" import { makeAutoObservable } from "mobx" import { observer } from "mobx-react" // Model the application state. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(this) } increase() { this.secondsPassed += 1 } reset() { this.secondsPassed = 0 } } const myTimer = new Timer() // Build a user interface that uses the observable state. const TimerView = observer(({ timer }) => ( <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button> )) ReactDOM.render(<TimerView timer={myTimer} />, document.body) // Update the 'Seconds passed: X' text every second. setInterval(() => { myTimer.increase() }, 1000)结论
MobX 是用于 Web 应用程序开发的强大状态管理工具。 通过编写将应用程序的反应性数据连接到用户界面的简单代码的能力，开发人员可以创建引人注目的 Web 应用程序。
无论您是已经熟悉 MobX 还是只是尝试一下，Liquid Web 都有许多托管托管选项可供您的应用程序选择。 立即联系我们的销售团队以开始使用。
