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
首先需要安装 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 版本将默认不启用装饰器,你也完全不需要使用它。
- 在
tsconfig.json
中启用编译器选项"experimentalDecorators": true
安装 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
应该放在首位。然后在文件中导入即可,如:
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学习的主要内容,如果未能解决你的问题,请参考以下文章
AntDesign(React)学习-11 简单使用mobx