mobx-study

简介

Mobx是一个功能强大,上手非常容易的状态管理工具。其他状态管理工具有Flux,redux,dva

基本用法

安装

mobx安装:npm install mobx --saveyarn add mobx -S,如果与react进行搭配使用的话,则需要安装mobx-react: npm install mobx-react --save

概念

mobx支持单项数据流,也就是通过action去改变状态,然后状态的改变会更新所有受影响的视图。其中主要用到的几个要点有:

abservable

abservable定义状态为可观察状态,其数据结构不限定,可以是基本数据类型,也可以是引用类型。例如:

1
2
3
4
5
6
7
8
9
10
inport { observable } from 'mobx';
const appStore = abservable({
todos: []
});
// 或者使用装饰器形式展示
@observable appStore = {
todos: []
};

action

有了可观察的状态,那么就需要操作可观察状态的动作,action的作用就是为了改变状态的。同样也分为两种形式展示:

1
2
3
4
5
6
7
8
9
import { action } from 'mobx';
appStore.resetTodos = action(function reset() {
appStore.todos = [];
});
@action resetTodos() {
appStore.todos = [];
}

computed

计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值。如果任何影响计算值的值发生变化了,计算值将根据状态自动进行衍生。例如:

1
2
3
4
5
import { computed } from 'mobx';
@computed get unfinishedTodos() {
return this.props.appStore.filter((todo) => !todo.finished).length;
}

autorun

当你想创建一个响应式函数,而该函数本身永远不会有观察者时,可以使用mobx autorun。这通常需要你从反应式代码桥接到命令式代码的情况。例如打印日志,持久化或是更新UI的情况。当使用autorun时,所提供的函数总是被触发一次,然后他的依赖关系每次触发时会再次被触发。

传递给autorun的函数在调用后会接收一个参数,可用于在执行期间清理autorun

1
2
3
4
5
6
7
8
9
10
11
var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));
var disposer = autorun(() => console.log(sum.get()));
// 输出 '6'
numbers.push(4);
// 输出 '10'
disposer();
numbers.push(5);
// 不会再输出任何值。`sum` 不会再重新计算。

when

reaction

observer

observer 函数/装饰器可以用来将react组件转变为响应式组件。它用mobx.autorun来包装了组件的render函数以确保任何组件渲染中使用了数据变化时都可以强制刷新组件。observer是由单独的mobx-react包提供的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {observer} from "mobx-react";
var timerData = observable({
secondsPassed: 0
});
setInterval(() => {
timerData.secondsPassed++;
}, 1000);
@observer class Timer extends React.Component {
render() {
return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
}
};
ReactDOM.render(<Timer timerData={timerData} />, document.body);