@inject
@inject是为了向当前组件注入store, 通过Provider组件提供的context向下传递后，进而使用this.props来获取； 其实@inject方法和react-redux提供的connect方法很相似，都是将store向下传递到后代组件上；
@observer
@observer 是mobx-react提供的，通过使用@observer，将react组件转换成一个监听者，这样在被监听的应用状态变量(Observable)有更新时，react组件就会重新渲染。当 render 中的 state发生改变时， mobx-react 会重新调用 render 方法，重新渲染这个组件;
observer通过es7的装饰器模式，将一个React组件作为参数，并将其转为响应式（Reactive）组件
// model
import {
observable } from 'mobx';
class TodoItemModel {
@observable title;
@observable completed;
}
// 组件
import {
observer } from 'mobx-react';
@inject('todo')
@observer
class TodoItem extends React.Component {
render() {
const {
todo: {
title, completed } } = this.props;
return (
....
);
}
}
Provider组件
在react中，mobx-react提供provider组件用来包裹最外层组件节点，并且传入store通过context传递给后代组件；
import {
Provider } from 'mobx-react';
// 将每个模块的store实例化后，以键值对的方式存储到store，每个组件可以通过this.props[key]获取其对应的方法和属性；
const stores = {
loginStore: new LoginStore(),
homeStore: new HomeStore()
};
ReactDOM.render((
<Provider {
...stores}>
<App />
</Provider>
), document.getElementById('root'));
mobx api说明
@observable
observable的属性值在其变化的时候 ，mobx 会自动追踪并作出响应
import {
observable } from 'mobx';
class TodoItemModel {
@observable title;
@observable completed;
}
@action
对涉及到状态变量改变的函数，都必须使用@action修饰符；
import {
observable } from 'mobx';
class TodoItemModel {
@observable id = 1;
@observable title;
@observable completed;
@action
change = () => {
this.id +=1;
}
}
@computed
使用@computed来对变量属性进行计算；
使用方式： 在@computed装饰的方法前面加上get;
// model
import {
observable } from 'mobx';
class TodoItemModel {
@observable price = 1;
@observable amount = 2;
@computed
get total = () => {
return this.price + this.amount;
}
}
// 组件
import {
observer } from 'mobx-react';
@inject('todo')
@observer
class TodoItem extends React.Component {
componentDidMount() {
this.calc();
}
calc = () => {
const {
todo: {
total } } = this.props;
return total;
}
}
autorun
autorun每次初始化都会自动运行一次， 当可观察的变量改变（普通变量不生效）时，autorun函数会重新触发，
使用场景： 一个函数需要自动运行，但不会产生新的值；
import {
autorun } from 'mobx';
class HomeStore {
@observable price = 1;
@observable amount = 2;
}
const home = new HomeStore();
autorun(() => {
// 执行两次
console.log(`autorun ------> ${
home.amount}/${
home.price}`);
});
home.amount = 100;
reaction
reaction初始化时不会自动运行，当可观察的变量改变（普通变量不生效）时，reaction会被触发；
用法： reaction(() => data, (data, reaction) => { sideEffect }
接收两个参数， 第一个参数用来返回数据的函数， 第二个参数返回一个清理函数，data指第一个参数返回的数据, reaction指当前可观察变量集合
import {
reaction } from 'mobx';
class HomeStore {
@observable price = 1;
@observable amount = 2;
}
const home = new HomeStore();
reaction(() => [home.amount, home.price], (arr, params) => {
// 执行一次
console.log(`reaction------->${
arr.join('/')}`, params);
});
home.amount = 100;