MobX 🇺🇦

MobX 🇺🇦

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

›技巧与窍门

简介

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

MobX 核心

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

MobX 和 React

  • React 集成
  • React 优化 {🚀}

技巧与窍门

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

微调

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

子类化

子类化受 限制 的支持。最值得注意的是,你只能在 **原型上重写操作/流程/计算值** - 你不能重写 字段声明。对于在子类中重写的方法/getter,使用 override 注解 - 请参见下面的示例。尽量保持简单,并优先使用组合而不是继承。

import { makeObservable, observable, computed, action, override } from "mobx"

class Parent {
    // Annotated instance fields are NOT overridable
    observable = 0
    arrowAction = () => {}

    // Non-annotated instance fields are overridable
    overridableArrowAction = action(() => {})

    // Annotated prototype methods/getters are overridable
    action() {}
    actionBound() {}
    get computed() {}

    constructor(value) {
        makeObservable(this, {
            observable: observable,
            arrowAction: action
            action: action,
            actionBound: action.bound,
            computed: computed,
        })
    }
}

class Child extends Parent {
    /* --- INHERITED --- */
    // THROWS - TypeError: Cannot redefine property
    // observable = 5
    // arrowAction = () = {}

    // OK - not annotated
    overridableArrowAction = action(() => {})

    // OK - prototype
    action() {}
    actionBound() {}
    get computed() {}

    /* --- NEW --- */
    childObservable = 0;
    childArrowAction = () => {}
    childAction() {}
    childActionBound() {}
    get childComputed() {}

    constructor(value) {
        super()
        makeObservable(this, {
            // inherited
            action: override,
            actionBound: override,
            computed: override,
            // new
            childObservable: observable,
            childArrowAction: action
            childAction: action,
            childActionBound: action.bound,
            childComputed: computed,
        })
    }
}

限制

  1. 只有在 **原型上** 定义的 action、computed、flow、action.bound 可以被子类 **重写**。
  2. 除了使用 override,字段不能在子类中重新注解。
  3. makeAutoObservable 不支持子类化。
  4. 不支持扩展内置类型 (ObservableMap、ObservableArray 等)。
  5. 你不能在子类中为 makeObservable 提供不同的选项。
  6. 你不能在一个单一的继承链中混合注解/装饰器。
  7. 所有其他限制也适用。

TypeError: Cannot redefine property

如果你看到这个错误,你可能正在尝试在子类 x = () => {} 中 **重写箭头函数**。这是不可能的,因为类的 **所有注解** 字段都是 **不可配置的** (参见限制)。你有两个选择

1. 将函数移到原型上,并使用 action.bound 注解代替

class Parent {
    // action = () => {};
    // =>
    action() {}

    constructor() {
        makeObservable(this, {
            action: action.bound
        })
    }
}
class Child {
    action() {}

    constructor() {
        super()
        makeObservable(this, {
            action: override
        })
    }
}

2. 删除 action 注解,并在操作中手动包装函数:x = action(() => {})

class Parent {
    // action = () => {};
    // =>
    action = action(() => {})

    constructor() {
        makeObservable(this, {}) // <-- annotation removed
    }
}
class Child {
    action = action(() => {})

    constructor() {
        super()
        makeObservable(this, {}) // <-- annotation removed
    }
}

← 理解响应式分析响应式 {🚀} →
  • 限制
    • TypeError: Cannot redefine property
MobX 🇺🇦
文档
关于 MobXMobX 的核心
社区
GitHub 讨论 (NEW)Stack Overflow
更多
星标