curTain

mobx 简明学习与实践….

前置环境准备:请参考:es6—Decorator,并使用 yarn add mobx 安装 mobx 模块。

1. 前言

学习前,建议仔细阅读一遍 MobX 介绍 了解 mobx 运行机制。

先看 mobx 官网的文档目录:

可以看到,整个库,需要我们学习的就只有三个主要的点:

  1. observable 相关 —– 创建观察数据
  2. 对 observables 作出响应 —– 数据改变时的响应操作
  3. 改变 observables

还有一个工具函数。

2. observable 相关 —- 创建被观察数据

创建可观察数据的方式有两种:

  1. 使用 observable 函数构建
  2. 使用 @observable 装饰类构建

2.1 使用 observable 函数构建

observable 函数构建可观察的数据
1
2
3
4
5
6
const value = observable("value")
const list = observable([1, 2, 4])
const map = observable.map({ key: "value"})

// 使用 observable.box()
const cityName = observable.box("tan")

2.1 使用 @observable 装饰类构建

1
2
3
4
5
6
7
8
9
10
class Store {
@observable num = 22
@observable str = "string"
@observable bool = false
@observable obj = {
name: "tan",
age: 12
}
@observable array = []
}

3. 对 observables 作出响应

有 4 个 api 处理响应:

  1. computed 和 @computed 函数内依赖的观察项改变时,自动执行,类似 vue 中的 computed
  2. autorun( fn, { options } ): 函数内的依赖项改变时,自动执行
  3. when( fn, fn ): 第一个函数内依赖项改变时执行第一个函数,第一个函数返回 true 时,执行第二个函数
  4. reaction( fn, fn ): 第一个函数返回一个数组,数组中值的改变时,执行第二个函数

observer 和 @observer 修饰 react 类,用于更新视图

代码:

代码放在文章尾部

运行结果:

4. action –改变– observables

我们可以直接通过 store 来修改属性,但是每一次属性的改变,响应操作都会执行,当我们需要一次性执多个属性的改变的时候,响应操作就会执行多次,但是我们只需要执行一次就够了,那怎么解决呢??此时 action 就出场了。

action 主要有:

  1. action( fn ): fn — 创建一个 action 函数
  2. @action - fn : 修饰类方法,使其变成 action 方法
  3. @action.bound : 修饰类方法,绑定 this
  4. runInAction(name?, thunk): 直接运行 action 操作,搭配 @action 可执行异步

案例:


代码放在文章底部

测试结果:

5. 总结

工具函数就自行看官方文档了。

对比着 mobx 的运行流程图:

我们就可以很轻易的理解各个 api 之间的关系了。

6. 参考材料

mobx—-官网

推荐大家去观看此教程,非常好的教程。
茵风泳月–mobx入门基础教程

7. 文中使用代码:

测试相应的代码

测试副作用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { observable, computed, autorun, when, reaction } from "mobx"

class Store {
@observable num = 22
@observable str = "string"
@observable bool = false
@observable obj = {
name: "tan",
age: 12
}

@computed get mixed(){
return this.obj.age + "-----" + this.str
}
}

var store = new Store()
// 测试 computed
var foo = computed( function(){
return store.str + "/" + store.obj.age
})
console.log( foo.get() )
console.log( store.mixed )

foo.observe( function( change ){
console.log( "computed 值改变:" )
console.log( "修改值:", change )
})

// 测试 autorun
autorun( () => {
console.log( "autorun运行:" )
console.log( store.str + "/" + store.obj.age )
})

// 测试 wen
when( ()=> store.bool , ()=> console.log( "变成 true 了..." ) )

// 测试 reaction
reaction( () => [ store.str, store.obj.age ],
arr => console.log( "reaction 运行:",arr ) )

console.log( "开始测试:------- wen ------" )
store.bool = true
console.log( "开始测试:------- 其他三个 ------" )
store.obj.age = 13

测试 action

测试 action
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { observable, action, reaction } from "mobx"

class Store {
@observable num = 22
@observable str = "string"
@observable bool = false
@observable obj = {
name: "tan",
age: 12
}

@action bar(){
this.str = "修改值了--"
this.num = 89
}
}

var store = new Store()
reaction( () => [ store.str, store.obj.age ],
arr => console.log( "reaction 运行:",arr ) )

// 不用 action 改变值
console.log( "不用 action 改变值:" )
store.obj.age = 11
store.str = "你好---"

// 使用 @action
console.log( "使用 action 修饰器改变多个值" )
store.bar()

// 使用 action 执行
console.log( "使用 action 修饰器改变多个值" )
action( () => {
store.str = "ppppppp"
store.obj.age = 45
})()

 评论