logo

MobX

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

MobX 的实现得益于以下赞助商的慷慨支持以及许多其他个人赞助者。赞助直接影响到该项目的持续发展。

🥇🥇 白金赞助商（$5000+ 总贡献额）：🥇🥇

🥇 金牌赞助商（$2500+ 总贡献额）

🥈 银牌赞助商（$500+ 总贡献额）

简介

任何可以从应用程序状态中推导出来的内容都应该这样。自动地。

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-lite"

// Model the application state.
function createTimer() {
    return makeAutoObservable({
        secondsPassed: 0,
        increase() {
            this.secondsPassed += 1
        },
        reset() {
            this.secondsPassed = 0
        }
    })
}

const myTimer = createTimer()

// 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.increase / myTimer.reset），该动作更新可观察状态（myTimer.secondsPassed）。可观察状态的更改会精确地传播到所有依赖于所做更改的计算和副作用（TimerView）。

MobX unidirectional flow

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

入门

要了解使用更大示例的 MobX 的核心概念，请查看MobX 的核心页面，或参加10 分钟的 MobX 和 React 交互式入门。

MobX 提供的心理模型的哲学和好处也在博客文章中详细介绍了，UI 作为事后诸葛亮和如何解耦状态和 UI（即你不需要 componentWillMount）。

致谢

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

对 Mendix 表示衷心的感谢，感谢他们提供了维护 MobX 的灵活性和支持，并有机会在真实、复杂、性能关键的应用程序中证明 MobX 的理念。

MobX 🇺🇦

MobX

简介

简单直观

毫不费力地实现最佳渲染

架构自由

一个简单的例子

入门

更多资源

MobX 书籍

视频

致谢