MobX 🇺🇦

MobX 🇺🇦

  • API 参考
  • 中文
  • 한국어
  • 赞助商
  • GitHub

›简介

简介

  • 关于 MobX
  • 关于本文档
  • 安装
  • MobX 的核心

MobX 核心

  • 可观察状态
  • 动作
  • 计算值
  • 反应 {🚀}
  • API

MobX 和 React

  • React 集成
  • React 优化 {🚀}

技巧

  • 定义数据存储
  • 理解反应式
  • 子类化
  • 分析反应式 {🚀}
  • 带参数的计算值 {🚀}
  • MobX-utils {🚀}
  • 自定义可观察值 {🚀}
  • 延迟可观察值 {🚀}
  • 集合工具 {🚀}
  • 拦截和观察 {🚀}

微调

  • 配置 {🚀}
  • 装饰器 {🚀}
  • 从 MobX 4/5 迁移 {🚀}
编辑

logo

MobX

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

Discuss on Github npm version OpenCollective OpenCollective View changelog


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

🥇🥇 白金赞助商($5000+ 总贡献额):🥇🥇


Guilded Canva Parallax

🥇 金牌赞助商($2500+ 总贡献额)


One Beyond Frontend Masters Auction Frontier CodeFirst Modulz Coinbase Curology Mendix Facebook Open Source Casino Sites Bugsnag

🥈 银牌赞助商($500+ 总贡献额)

mantro GmbH Extremely Heavy Algolia Space307 Blokt UPPER DAZN talentplot EaseUS Route Planner and Route Optimizer


简介

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

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 速查表(£5)既有用,又赞助了该项目
  • 10 分钟的 MobX 和 React 交互式入门
  • Egghead.io 课程,基于 MobX 3
  • MobX Awesome 列表——一个包含 MobX 资源和示例项目的长列表

MobX 书籍

MobX 快速入门指南($24.99)由Pavan Podila和Michel Weststrate撰写,可作为电子书、纸质书,以及在O'Reilly 平台上获取(请参见预览)。

视频

  • 2020 年 MobX 和 React 入门由 Leigh Halliday 讲解,17 分钟。
  • ReactNext 2016: 实践中的 MobX由 Michel Weststrate 讲解,40 分钟,幻灯片。
  • CityJS 2020: MobX,从可变到不可变,到可观察的数据由 Michel Weststrate 讲解,30 分钟。
  • OpenSourceNorth: MobX 实践中的 React(ES5)由 Matt Ruby 讲解,42 分钟。
  • HolyJS 2019: MobX 与可预测性与速度的独特共生由 Michel Weststrate 讲解,59 分钟。
  • React Amsterdam 2016: 状态管理很简单由 Michel Weststrate 讲解,20 分钟,幻灯片。
  • {🚀} React Live 2019: 重构 MobX由 Max Gallo 讲解,27 分钟。

致谢

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

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

关于本文档 →
  • 简介
  • 一个简单的例子
  • 入门
  • 更多资源
    • MobX 书籍
    • 视频
  • 致谢
MobX 🇺🇦
文档
关于 MobXMobX 的核心
社区
GitHub 讨论区 (新)Stack Overflow
更多
Star