MobX
简单且可扩展的状态管理。
介绍
任何可以从应用状态派生的东西都应该是 - 自动地。
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 的应用。
入门
要使用更大的示例了解 MobX 的核心概念,请查看 MobX 的要点 页面,或查看 10 分钟 MobX 和 React 互动介绍。
MobX 提供的心智模型的理念和优点也在博客文章 UI 是事后的想法 和 如何解耦状态和 UI(也就是你不需要 componentWillMount) 中进行了详细描述。
更多资源
- MobX 备忘单(5 英镑)既有用又赞助该项目
- 10 分钟 MobX 和 React 互动介绍
- Egghead.io 教程,基于 MobX 3
- MobX 精彩列表 – 一长串 MobX 资源和示例项目
MobX 书籍
Pavan Podila 和 Michel Weststrate 的 MobX 快速入门指南(24.99 美元)有 电子书籍、平装书籍 和 O'Reilly 平台 版本(参见 预览)。
视频
- Leigh Halliday 的 2020 年 MobX 和 React 简介,17 分钟
- Michel Weststrate 的 ReactNext 2016:现实世界的 MobX,40 分钟,幻灯片。
- Michel Weststrate 的 CityJS 2020:MobX,从可变到不可变,再到可观察数据,30 分钟
- Matt Ruby 的 OpenSourceNorth:使用 MobX 进行实用 React (ES5),42 分钟。
- Michel Weststrate 的 HolyJS 2019:MobX 以及可预测性和速度的独特共生,59 分钟。
- Michel Weststrate 的 React Amsterdam 2016:状态管理很简单,20 分钟,幻灯片。
- {🚀} Max Gallo 的 React Live 2019:重塑 MobX,27 分钟。
鸣谢
MobX 的灵感来自反应式编程原理,例如在电子表格中使用的原理。 它受到 MeteorJS 的跟踪器、Knockout 和 Vue.js 等模型-视图-视图模型框架的启发,但 MobX 将透明函数式反应式编程(TFRP,在 MobX 书籍 中进一步解释的概念)提升到了一个新的水平,并提供了独立的实现。 它以无故障、同步、可预测和高效的方式实现 TFRP。
Mendix 为维护 MobX 提供了灵活性和支持,并有机会在真实、复杂、性能关键的应用中证明 MobX 的理念,这要归功于 Mendix。