1.关于装饰器无法启用解决办法：
1.1安装修改 CRA 配置的工具
npm install react-app-rewired --save-dev
1.2 react-app-rewired不兼容CRA2，可以使用customize-cra来兼容CRA2
npm install customize-cra --save-dev
1.3安装装饰器插件
npm install @babel/plugin-proposal-decorators --save-dev
1.4在项目根目录新建文件config-overrides.js 并配置：
const{override,addDecoratorsLegacy}=require('customize-cra');
module.exports=override(addDecoratorsLegacy());
1.5修改package.json文件
"scripts":{
"start": "react-app-rewiredstart",
"build": "react-app-rewiredbuild",
"test": "react-app-rewiredtest",
"eject": "react-app-rewiredeject"
},
"babel":{
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
1.6启动项目，可以使用装饰器
2. 使用react
2.1 react的provider传递store
ReactDOM.render((
<Provider store={userStore}}>
<App />
</Provider>
), document.getElementById('container'));
多个store：
const stores = {
mainStore, userStore, commonStore
};
ReactDOM.render((
<Provider {...stores}>
<App />
</Provider>
), document.getElementById('container'));
2.2 @inject 将组件从Provider提供给组件的state数据中选取所需数据，以props的形式传递给目标组件。
@inject( 'userStore')
…
render(){
// 可以以this.props.userStore形式获取store内state
const { user } = this.props.userStore;
…
}
3. mobx的状态管理
3.1 observable 可观察状态
@observable 使数据处于可观察状态
@observable welcome = 'WelCome!';
@observable count = 0;
@observable object = {
name: 'test',
code: '1000',
age: 20
}
基本数据类型，@observable会将保存值的变量变为可观察状态，注意基本值本身不能改变，因此不是可观察的。
数组，数组本身及元素都是可观察的
对象，对象内所有的属性都是可观察的
数组对象，数组本身及对象元素都是，每个元素内部的属性也是可观察的
嵌套对象/嵌套数组，从本身递归到最小元素，即基本数据都是可观察的
自定义类对象，构造函数为自定义，需要在构造函数中自行处理才可变为可观察的
class User{ //自定义类
@observable name;
@observable role;
constructor(name, role){ //需要在构造函数中处理
this.name = name;
this.role = role;
}
}
user = new User('admin', '管理员'); // 更改属性值，会被观测到
3.2 @computed计算属性值
根据现有的状态或其他计算属性值衍生出的值。有助于使实际可修改的状态尽可能的小，可以尽量多的使用它。
@computed get getInfo() {
return `\nname:${this.object.name}
\ncode:${this.object.code}
\nage:${this.object.age}`;
}
@computed 只有其依赖的@observable 属性和其他@computed改变时才会触发重新计算更新。
@computed只有被使用时才会计算，比如@observer，其他@computed，autorun等
3.3 autorun 永远不会被观察的响应式函数
disposer=autorun(() => {
console.log(this.getInfo);
if (this.count >=5 ) {
this.disposer();
}
});
接受一个函数作为参数，此参数函数会在使用autorun时立刻执行一次，之后会在autorun 参数函数依赖的@observable 和@computed改变时触发执行
和@computed不同，autorun没有观察者，触发条件仅限于依赖值的改变，自动运行
autorun应作为打印日志和更新UI的函数，不产生返回新值
autorun的返回值为autorun的终止函数，用来清除autorun，执行之后autorun将不再执行。
3.4 reaction 属于autorun的变更版本
reaction=reaction(() => this.count, count => {
console.log(this.count);
if (count >= 8) {
this.reaction();
}
});
reaction接收两个函数作为参数，第一个为数据函数，第二个为效果函数。数据函数的返回值作为效果函数的参数
reaction在使用时不会自动运行一次，与autorun不同
reaction只有在数据函数依赖的属性值变化时才会执行，而效果函数只有在数据函数的返回值变化时才会执行，效果函数不会观测属性值的变化。
reaction的返回值是其终止函数，在reaction不用时进行清理
3.5 when
when = when(() => this.object.age >= 23, () => {
alert(this.object.age);
} );
when接收两个函数作为参数，第一个为条件函数，第二个为效果函数。条件函数的返回值作为效果函数执行的条件。
条件函数会观察属性值的变化，并根据属性值执行。当其返回值为true时，执行效果函数，并且只执行这一次，之后when会被自动清理。
when的返回值是when的终止函数，可用于主动清除。
when最多执行一次。
