MobX 🇺🇦

MobX 🇺🇦

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

›技巧与窍门

介绍

  • 关于 MobX
  • 关于本文档
  • 安装
  • MobX 的精髓

MobX 核心

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

MobX 和 React

  • React 集成
  • React 优化 {🚀}

技巧与窍门

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

微调

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

集合工具 {🚀}

它们使您能够使用相同的通用 API 操作可观察数组、对象和映射。这些 API 是完全响应式的,这意味着即使没有 Proxy 支持,如果使用 set 添加新属性声明,以及使用 values 或 keys 对它们进行迭代,MobX 也可以检测到它们。

values、keys 和 entries 的另一个好处是它们返回数组而不是迭代器,这使得例如可以在结果上立即调用 .map(fn)。

尽管如此,一个典型的项目很少有理由使用这些 API。

访问

  • values(collection) 返回集合中所有值的数组。
  • keys(collection) 返回集合中所有键的数组。
  • entries(collection) 返回集合中所有条目 [key, value] 对的数组。

变异

  • set(collection, key, value) 或 set(collection, { key: value }) 使用提供的键/值对更新给定的集合。
  • remove(collection, key) 从集合中删除指定的子元素。对于数组使用拼接。
  • has(collection, key) 如果集合具有指定的可观察属性,则返回true。
  • get(collection, key) 返回指定键下的子元素。

如果您在没有 Proxy 支持的环境中使用访问 API,那么也使用变异 API,这样它们就可以检测到更改。

import { autorun, get, set, observable, values } from "mobx"

const twitterUrls = observable.object({
    Joe: "twitter.com/joey"
})

autorun(() => {
    // Get can track not yet existing properties.
    console.log(get(twitterUrls, "Sara"))
})

autorun(() => {
    console.log("All urls: " + values(twitterUrls).join(", "))
})

set(twitterUrls, { Sara: "twitter.com/horsejs" })
← 延迟可观察对象 {🚀}拦截与观察 {🚀} →
MobX 🇺🇦
文档
关于 MobXMobX 的精髓
社区
GitHub 讨论 (NEW)Stack Overflow
更多
星标