title: Creating observable state sidebar_label: Observable state

hide_title: true

创建可观察状态

属性，完整的对象，数组，Maps 和 Sets 都可以被转化为可观察对象。 使得对象可观察的基本方法是使用 makeObservable 为每个属性指定一个注解。 最重要的注解如下：

• observable 定义一个存储 state 的可追踪字段。
• action 将一个方法标记为可以修改 state 的 action。
• computed 标记一个可以由 state 派生出新的值并且缓存其输出的 getter。

像数组，Maps 和 Sets 这样的集合都将被自动转化为可观察对象。

makeObservable

用法：

• makeObservable(target, annotations?, options?)

这个函数可以捕获已经存在的对象属性并且使得它们可观察。任何 JavaScript 对象（包括类的实例）都可以作为 target 被传递给这个函数。 一般情况下，makeObservable 是在类的构造函数中调用的，并且它的第一个参数是 this 。 annotations 参数将会为每一个成员映射 注解。需要注意的是，当使用 装饰器 时，annotations 参数将会被忽略。

派生数据并且接受参数的方法（例如：findUsersOlderThan(age: number): User[]）不需要任何注解。 当我们从一个 reaction 中调用它们时，它们的读取操作仍然会被跟踪，但是为了避免内存泄漏，它们的输出将不会被记忆化。更详细的信息可以查看 MobX-utils computedFn {🚀}。

Mobx 通过 override 注解 支持子类的使用，但会有一些局限性。

import { makeObservable, observable, computed, action } from "mobx"
class Doubler {
    value
    constructor(value) {
        makeObservable(this, {
            value: observable,
            double: computed,
            increment: action,
            fetch: flow
        })
        this.value = value
    }
    get double() {
        return this.value * 2
    }
    increment() {
        this.value++
    }
    *fetch() {
        const response = yield fetch("/api/value")
        this.value = response.json()
    }
}

所有带注解 的字段都是 不可配置的。
所有的不可观察（无状态）的字段（action, flow）都是 不可写的。

import { makeAutoObservable } from "mobx"
function createDoubler(value) {
    return makeAutoObservable({
        value,
        get double() {
            return this.value * 2
        },
        increment() {
            this.value++
        }
    })
}

注意，类也可以跟 makeAutoObservable 合用。 示例中的差异就展示了将 MobX 应用于不同编程风格的方法。

import { observable } from "mobx"
const todosById = observable({
    "TODO-123": {
        title: "find a decent task management system",
        done: false
    }
})
todosById["TODO-456"] = {
    title: "close all tickets older than two weeks",
    done: true
}
const tags = observable(["high prio", "medium prio", "low prio"])
tags.push("prio: for fun")

与第一个例子中的 makeObservable 不同，observable 支持为对象添加（和删除）字段。 这使得 observable 非常适合用于像动态键控的对象、数组、Maps 和 Sets 之类的集合。

makeAutoObservable

使用：

• makeAutoObservable(target, overrides?, options?)

makeAutoObservable 就像是加强版的 makeObservable，在默认情况下它将推断所有的属性。你仍然可以使用 overrides 重写某些注解的默认行为。 具体来说，false 可用于从自动处理中排除一个属性或方法。 查看上面的代码分页获取示例。 与使用 makeObservable 相比，makeAutoObservable 函数更紧凑，也更容易维护，因为新成员不需要显式地提及。 然而，makeAutoObservable 不能被用于带有 super 的类或 子类。

推断规则：

• 所有 自有 属性都成为 observable。
• 所有 getters 都成为 computed。
• 所有 setters 都成为 action。
• 所有 prototype 中的 functions 都成为 autoAction。
• 所有 prototype 中的 generator functions 都成为 flow。（需要注意，generators 函数在某些编译器配置中无法被检测到，如果 flow 没有正常运行，请务必明确地指定 flow 注解。）
• 在 overrides 参数中标记为 false 的成员将不会被添加注解。例如，将其用于像标识符这样的只读字段。

observable

用法：

• observable(source, overrides?, options?)

observable 注解可以作为一个函数进行调用，从而一次性将整个对象变成可观察的。 source 对象将会被克隆并且所有的成员都将会成为可观察的，类似于 makeAutoObservable 做的那样。 同样，你可以传入一个 overrides 对象来为特定的成员提供特定的注解。 查看上面的代码获取示例。

由 observable 返回的对象将会使用 Proxy 包装，这意味着之后被添加到这个对象中的属性也将被侦测并使其转化为可观察对象（除非禁用 proxy）。

observable 方法也可以被像 arrays，Maps 和 Sets 这样的集合调用。这些集合也将被克隆并转化为可观察对象。

可用的注解

局限性

1. make(Auto)Observable 仅支持已经定义的属性。请确保你的 编译器选项是正确的，或者，作为权宜之计，确保在你使用 make(Auto)Observable 之前已经为所有属性赋了值。如果没有正确的配置，已经声明而未初始化的字段（例如：class X { y; }）将无法被正确侦测到。
2. makeObservable 只能注解由其本身所在的类定义声明出来的属性。如果一个子类或超类引入了可观察字段，那么该子类或超类就必须自己为那些属性调用 makeObservable。
3. options 参数只能提供一次。被传入的 options 是 “有粘性” 的，之后无法更改（例如，在 子类 中）。
4. 每个字段只能被注解一次（override 除外）。字段注解和配置不能在 子类 中改变。
5. 非普通对象（类）中的 所有被注解过的 字段都是 不可配置的。
   可以通过 configure({ safeDescriptors: false }) 来禁用 {🚀☣️} 。
6. 所有不可观察（stateless）字段（action，flow）都是 不可写的。
   可以通过 configure({ safeDescriptors: false }) 来禁用 {🚀☣️} 。
7. 只有定义在原型上的 action，computed，flow，action.bound 可以在子类中被 overriden。
8. 默认情况下 TypeScript 不会允许你注解私有字段。这个问题可以通过将相关私有字段作为泛型参数显式传入来解决，就像这样： makeObservable<MyStore, "privateField" | "privateField2">(this, { privateField: observable, privateField2: observable })。
9. make(Auto)Observable的调用和注解的提供必须无条件地进行，因为这样才可能对推断结果进行缓存。
10. 不支持 在调用 make(Auto)Observable 之后 修改原型。
11. 不支持 EcmaScript 中的私有字段（#field）。使用 TypeScript 时，推荐改用 private 修饰符。
12. 不支持 在单个继承链中 混合使用注解和装饰器 - 例如，在超类中使用了装饰器，就不能再在子类中使用注解。
13. makeObservable，extendObservable 不能在其它内置可观察类型上使用（ObservableMap，ObservableSet，ObservableArray 等）。
14. makeObservable(Object.create(prototype)) 将属性从 prototype 拷贝到新创建的对象并且使得其是可观察的。此行为是错误的、不可预测的，因此已经不推荐使用，并可能会在未来有所变动。不要使用它。

Options {🚀}

上面的 API 都有一个可选的 options 参数，该参数是一个对象，支持以下选项：

• autoBind: true 默认使用 action.bound/flow.bound，而不使用 action/flow。不影响被显式注释过的成员。
• deep: false 默认使用 observable.ref，而不使用 observable。不影响被显式注释过的成员。
• name: <string> 为对象提供一个调试名称，该名称将被打印在错误消息和 reflection API 中。
• proxy: false 迫使 observable(thing) 使用非 proxy 的实现。如果对象的结构不会随着时间变化，那么这就是一个很好的选择，因为非代理对象更容易调试并且速度更快。请参见 避免代理。

将 observable 转换回普通的 JavaScript 集合

有时有必要将可观察的数据结构转换回原生的数据结构。 例如，将可观察对象传入一个无法跟踪可观察对象的 React 组件时，或者想要获取一个不会再被更改的副本时。

要进行浅转换，用常用的 JavaScript 操作就可以做到：

const plainObject = { ...observableObject }
const plainArray = observableArray.slice()
const plainMap = new Map(observableMap)

要将数据树递归地转换为普通对象，可使用 toJS 工具函数。 对于类，建议实现一个 toJSON() 方法，因为这样会被 JSON.stringify 识别出来。

关于类的说明

到目前为止，以上大多数示例都倾向于使用类进行构建。 MobX 原则上对此没有限制，而且可能有同样多的MobX 用户使用的是普通对象。 但是，使用类的一个好处是更容易被索引以实现自动补全等功能，例如使用 TypeScript。 另外，instanceof 检查对于类型推断来说非常强大，并且类实例不会被包装在 Proxy 对象中，这一点给了它们更好的调试体验。 最后，使用类会从引擎优化中受益良多，因为它们的形态是可预测的并且方法在原型上是共享的。 但是，复杂的继承模式很容易给您自己带来不必要的麻烦，因此如果您想使用类，请尽量使其保持简单。 因此，尽管稍微倾向于使用类，但如果有更适合您的，我们肯定会鼓励您不采用这种风格。