Mobx学习

Posted 2021-09-14 yomua

Preface

• MobX 已经存在 6.0 版本

  • 相较于 5.0 版本，6.0 将默认禁用 5.0 版本的 decorate，它将使用新的 API 去替代 decorate. 参见：MobX EN 6.X

如果你想从 MobX 4.x/5.x 版本迁移到 6.x 版本…唔，我知道这在大型项目中很困难，所以我们提供了一个解决方法：MobX 6.x 版本（它在这段：Migrating an entire code-base from decorators to makeObservablemight be challenging）

而使用非装饰器的原因除了它们不是标准的以外，还有因为装饰器无法和 React Hook 一起结合使用，即：装饰器只能用于装饰 class component，而不是装饰函数式组件。

What\'s the MobX ?

MobX 是一个状态管理 library，；同样的，有相似作用的有：Redux，Vuex，它们都是对状态进行管理，只不过可能其实现过程不同。

其中 MobX 是通过透明的函数响应式编程 (transparently applying functional reactive programming - TFRP) 来对状态进行管理并使得状态管理变得简单和可扩展

MobX 背后的哲学：任何源自应用状态的东西都应该自动地获得。

TIP: React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而 MobX 提供机制来存储和更新应用状态供 React 使用。

Use MobX in React

1. 首先需要安装 mobx 和 mobx-react

   TIP: mobx-react-lite 更适用于 react hook，即：没有 class components 的项目，虽然 mobx-react 已经集成了 mobx-react-lite，但是它更轻便。

   下载使用：npm i --save mobx-react-lite

   # 建议使用 yarn
   yarn add mobx --save
   yarn add mobx-react --save
   # or
   npm install --save mobx mobx-react

   • 值得一提的是：如果你完全使用 MobX 6.x 版本，那么你可能不需要使用到以下的将装饰器编译，这是因为 MobX 6.x 版本将默认不启用装饰器，你也完全不需要使用它。

2. 在 tsconfig.json 中启用编译器选项 "experimentalDecorators": true

3. 安装 babel-preset-mobx 和 babel-plugin-transform-decorators-legacy

   npm i --save-dev babel-preset-mobx babel-plugin-transform-decorators-legacy

   并在 .babelrc 中添加以下配置：

   {
     "presets": [
         "mobx",
         "es2015", 
         "stage-1
     ],
     "plugins": ["transform-decorators-legacy"]
   }

   TIP：插件的顺序很重要: transform-decorators-legacy 应该放在首位。

4. 然后在文件中导入即可，如：

   import { observer } from "mobx-react";

   import { observable, computed, action } from "mobx";

参考文档：

• Mobx-启用装饰器语法

Api CN-MobX 5.x | EN-MobX 6.x

您可以购买 Mobx 6 的备忘单，它只有一页，但是它含有 Mobx 中所有重要的的 API，并且针对 MobX 6.x 进行了更新，包括 mobx-react/-lite.

makeObservable(MobX 6.x)

用法

• makeObservable(target, annotations?, options?)

PS：makeObservable 只能用于 class component 中

介绍

target

makeObservable 可以用来捕获现有对象的属性并使得这些属性成为可观察属性，我们可以把任何 JS 对象包括 class 的实例（这和 observable 不同，observable 永远无法观察 class 实例）传递到 makeObservable 的第 1 个参数 target 中,

但请注意：通常，我们会把 makeObservable 用在 class 的 constructor，并使得它的第 1 个参数 target 为 this：

class A {
    constructor() {
        makeObservable(this,{}) 
    }
}

功能性并且具有参数的函数不需要任何注释，如：findUsersOlderThan(age: number): User[]

原文：Methods that derive information and take arguments (for example findUsersOlderThan(age: number): User[]) don\'t need any annotation.

从 reaction 调用它们时，将会跟踪它们的读取操作，但是不会记住它们的输出，以防内存泄漏

原文：Their read operations will still be tracked when they are called from a reaction, but their output won\'t be memoized to avoid memory leaks.

看看这个： MobX-utils computedFn {