logo

MobX

简单且可扩展的状态管理。

较旧的 不再支持的 V4/V5 的文档可以是在此处找到，但请务必阅读有关当前文档优先的信息。

介绍

任何可以从应用状态派生的东西都应该是 - 自动地。

MobX 是一个经过考验的库，它通过透明地应用函数反应式编程使状态管理变得简单且可扩展。 MobX 背后的理念很简单：

😙

直截了当

编写能够捕捉你意图的简约、无样板的代码。尝试更新记录字段？只需使用普通的 JavaScript 赋值即可 — 反应系统将检测你的所有更改并将它们传播到正在使用的地方。在异步过程中更新数据时不需要特殊工具。

🚅

轻松优化渲染

数据的所有更改和使用都会在运行时进行跟踪，构建一个捕获状态和输出之间所有关系的依赖树。这保证了依赖于你的状态的计算（例如 React 组件）仅在严格需要时运行。无需使用容易出错和次优的技术（例如记忆和选择器）来手动优化组件。

🤹🏻‍♂️

架构自由

MobX 不偏不倚，允许你在任何 UI 框架之外管理应用状态。这使得你的代码解耦、可移植，最重要的是，易于测试。

简单的例子

那么使用 MobX 的代码是什么样的呢？

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)

TimerView React 组件周围的 observer 封装器将自动检测渲染依赖于 timer.secondsPassed 可观察对象，即使这种关系没有明确定义。当该字段将来更新时，反应性系统将负责重新渲染组件。

每个事件 (onClick / setInterval) 都会调用更新可观察状态 (myTimer.secondsPassed) 的操作 (myTimer.increase / myTimer.reset)。可观察状态的变化会精确地传播到依赖于所做变化的所有计算和副作用 (TimerView)。

MobX unidirectional flow

这个概念图可以应用于上面的例子，或者任何其他使用 MobX 的应用。

入门

要使用更大的示例了解 MobX 的核心概念，请查看 MobX 的要点 页面，或查看 10 分钟 MobX 和 React 互动介绍。

MobX 提供的心智模型的理念和优点也在博客文章 UI 是事后的想法和如何解耦状态和 UI（也就是你不需要 componentWillMount）中进行了详细描述。

鸣谢

MobX 的灵感来自反应式编程原理，例如在电子表格中使用的原理。它受到 MeteorJS 的跟踪器、Knockout 和 Vue.js 等模型-视图-视图模型框架的启发，但 MobX 将透明函数式反应式编程（TFRP，在 MobX 书籍中进一步解释的概念）提升到了一个新的水平，并提供了独立的实现。它以无故障、同步、可预测和高效的方式实现 TFRP。

Mendix 为维护 MobX 提供了灵活性和支持，并有机会在真实、复杂、性能关键的应用中证明 MobX 的理念，这要归功于 Mendix。

MobX 中文网

MobX

介绍

直截了当

轻松优化渲染

架构自由

简单的例子

入门

更多资源

MobX 书籍

视频

鸣谢