Mobx学习

Posted yomua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Mobx学习相关的知识,希望对你有一定的参考价值。

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 {

以上是关于Mobx学习的主要内容,如果未能解决你的问题,请参考以下文章

Mobx学习

AntDesign(React)学习-11 简单使用mobx

无法从 mobx 导入装饰

React Native使用Mobx总结

Jest/React/Mobx:TypeError mobxReact.observer 不是函数

mobx