reaxt的数据管理，除了redux之外，一个新的状态管理方案mobX
配置使项目支持修饰符@（修饰符概念）
安装插件
cnpm i --save-dev babel-plugin-transform-decorators-legacy
npm install --save-dev @babel/plugin-proposal-decorators
npm install --save-dev @babel/plugin-proposal-class-properties
配置package.json
+++
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},
回顾修饰器
在 MobX 的使用中，使用 ES7 语法的 修饰器（Decorator） 将可以极大的简化组织代码，当然，如果使用 ES5 的语法也未尝不可，但是我这里还是强烈建议大家使用 修饰器
修饰器模式：我的理解----就是在函数外边套一层，包装一下这个函数，就是一个语法糖，本质就是一个函数。。。。
@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
核心概念
几个部分组成：Actions、State、Computed 、Reactions
在整个数据流中，通过事件驱动（UI 事件、网络请求…）触发 Actions，在 Actions 中修改了 State 中的值，这里的 State 既应用中的 store 树（存储数据），然后根据新的 State 中的数据计算出所需要的计算属性（computed values）值，最后响应（react）到 UI 视图层。
例子
const { observable, action, computed, autorun } = mobx;
class Store {//这个store类里边定义要监听的状态，计算函数，修改函数（很类似vuex）
@observable list = []//监听list数组
@computed get total() {//计算函数 使用的是get方法
return this.list.length;
}
@action change () {//通过action来修改state状态，不用action也行，但是最好使用action修改，保证数据流有唯一的修改方式，不会造成混乱
this.list.push(this.list.length);
}
};
const mstore = new Store();//实例化state，包含类里边的所有的属性函数等
setInterval(() => {
mstore.change();
}, 2000);
autorun(() => {//当mstore.total发生变化的时候会出发autorun的执行
console.log(mstore.total);
});
@observable classProperty = value
- @observable 对这个value进行了深监听，就是他里边的每个属性或者数组的每一项改变的化都会监听的到，都会触发autorun的执行(@observable监听的state只要修改了<不是给store类增加新的监听对象>就会触发autorun的执行)
- 当定义好其 observable 的对象值后，store中后来添加的值是不会变为可观察的，这时需要使用 extendObservable 来扩展对象：
class Store {
@observable oo;
constructor(){
this.oo={
name:1
};
}
};
const mstore = new Store();
extendObservable(mstore, {//给mstore类增加了一个被监听的数据age
age: 0,
});
var i = 1;
setInterval(() => {
mstore.age = i++;
}, 2000);
autorun(() => {
console.log(mstore.age);
});
action
@action，其规定对于 store 对象中所有可观察状态属性的改变都应该在 @action 中完成，它使代码可以组织的更好，并且对于数据改变的时机也更加清晰。
除了action，在 mobx 中，可以有很多种方式去修改 state，mobx 并不对其做限制；
但是如果使用了严格模式：
import { useStrict } from 'mobx';
useStrict(true);//这样state只能通过action修改
autorun
- autorun 接受一个函数作为参数，在使用 autorun 的时候，该函数会被立即调用一次，之后当该函数中依赖的可观察状态属性（或者计算属性）发生变化的时候，该函数会被调用，注意，该函数的调用取决的函数中使用了哪些可观察状态属性（或者计算属性）。
- autorun 中的函数就是用来操作 Reactions 的，当可观察状态属性的值发生改变的时候，可以在该函数中利用状态值来更新改变 UI 视图（记录日志、持久化），在 MobX 结合 React 的使用中，mobx-react 库则是封装了 autorun 用来在 store 中的可观察状态属性值发生改变的时候 rerender React 组件。
处理异步行为
class Store {
@ observable items;
constructor(){
this.items=0//给个默认值
}
async fetchData(pathname, id) {
let { data } = await axios.get(
`localhost:3000/${pathname}`
);
this.setData(data) ;
}
@action setData(data) {
this.items = data;
}
)
在 React 中使用 MobX---mobx-react
在 React 中使用 MobX 需要用到 mobx-react。
其提供了 Provider 组件用来包裹最外层组件节点，并且传入 store（通过）context 传递给后代组件：
import { Provider } from 'mobx-react';
const stores = {
...
};
ReactDOM.render((
<Provider {...stores}>
<App />
</Provider>
), document.getElementById('root'));
使用 @inject 给组件注入其需要的 store（利用 React context 机制）；
通过 @observer 将 React 组件转化成响应式组件，它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件：
import React from 'react';
import { inject, observer } from 'mobx-react';
@inject('userStore', 'commonStore')//以来两个store
@observer
export default class App extends React.Component {
componentWillMount() {
if (this.props.commonStore.token) {
this.props.userStore.pullUser().finally(() => this.props.commonStore.setAppLoaded());
} else {
this.props.commonStore.setAppLoaded();
}
}
render() {
if (this.props.commonStore.appLoaded) {
return (
<div>
...
{this.props.children}
</div>
);
}
return (
...
);
}
}
