Mobx是什么
MobX实现简单、可扩展的状态管理。
使用MobX将应用变成响应式可归纳为三部曲：
定义状态并使其可观察 (Observable)
创建视图以响应状态的变化 (observer)
更改状态(action)
安装
cnpm install --save mobx mobx-react
概念
Observable
Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。
返回相应的Observable对象
import {observable} from 'mobx';
const map = observable.map({ key: "value"});
map.set("key", "new value");
const list = observable([1, 2, 4]);
list[2] = 3;
const person = observable({
firstName: "Clive Staples",
lastName: "Lewis"
});
person.firstName = "C.S.";
const temperature = observable.box(20);
temperature.set(25);
import {observable} from 'mobx';
let appState = observable({
timer: 0
});
observer
使用mobx-react observer() 来包裹 React 组件，形成了observer。
import { observer } from 'mobx-react';
let App = observer(({ appState }) => {
return (
<div className="App">
<h1>Time passed: {appState.timer}</h1>
</div>
);
});
or
import { observer } from 'mobx-react';
@observer
class App extends React.Component {
render() {
return (
<div>
<div className="App">
<h1>Time passed: {this.props.appState.timer}</h1>
</div>
</div>
);
}
};
ReactDOM.render(<App appState={appState} />, document.getElementById('root'));
action
action 用来改变 observable的状态。
import { observable, action } from 'mobx';
var appState = observable({
timer: 0
});
appState.resetTimer = action(function reset() {
appState.timer = 0
});
appState.addTimer = action(function add() {
appState.timer++
});
let App = observer(({ appState }) => {
return (
<div className="App">
<button onClick={appState.resetTimer}>
Seconds passed: {appState.timer}
</button>
<button onClick={appState.addTimer}>
+
</button>
</div>
);
});
ReactDOM.render(<App appState={appState} />, document.getElementById('root'));
需要注意的是，observable的状态不仅仅可以通过action改变。
对比Mobx和Redux
- 相比
Redux，Mobx省略了很多代码量 -
Redux的状态管理更严格 -
Mobx可以设置多个store，Redux只能设置一个 -
Mobx对性能更友好 （观察者模式vsObject.assign()）
