1.關(guān)于裝飾器無法啟用解決辦法：
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數(shù)據(jù)中選取所需數(shù)據(jù)峡眶，以props的形式傳遞給目標(biāo)組件。
@inject( 'userStore')
…
render(){
// 可以以this.props.userStore形式獲取store內(nèi)state
const { user } = this.props.userStore;
…
}
3. mobx的狀態(tài)管理
3.1 observable 可觀察狀態(tài)
@observable 使數(shù)據(jù)處于可觀察狀態(tài)
@observable? ? welcome = 'WelCome!';
@observable? ? count = 0;
@observable? ? object = {
?? name: 'test',
?? code: '1000',
?? age: 20
}
基本數(shù)據(jù)類型京革，@observable會將保存值的變量變?yōu)榭捎^察狀態(tài)，注意基本值本身不能改變幸斥，因此不是可觀察的匹摇。
數(shù)組，數(shù)組本身及元素都是可觀察的
對象甲葬，對象內(nèi)所有的屬性都是可觀察的
數(shù)組對象廊勃，數(shù)組本身及對象元素都是，每個元素內(nèi)部的屬性也是可觀察的
嵌套對象/嵌套數(shù)組经窖，從本身遞歸到最小元素坡垫，即基本數(shù)據(jù)都是可觀察的
自定義類對象，構(gòu)造函數(shù)為自定義画侣，需要在構(gòu)造函數(shù)中自行處理才可變?yōu)榭捎^察的
class User{ //自定義類
??? @observable name;
??? @observable role;
??? constructor(name, role){ //需要在構(gòu)造函數(shù)中處理
??????? this.name = name;
??????? this.role = role;
??? }
}
user = new?User('admin', '管理員'); // 更改屬性值冰悠，會被觀測到
3.2 @computed計算屬性值
根據(jù)現(xiàn)有的狀態(tài)或其他計算屬性值衍生出的值。有助于使實際可修改的狀態(tài)盡可能的小配乱，可以盡量多的使用它溉卓。
@computed get? ? getInfo() {
return `\nname:${this.object.name}
\ncode:${this.object.code}
\nage:${this.object.age}`;
?}
@computed 只有其依賴的@observable 屬性和其他@computed改變時才會觸發(fā)重新計算更新。
@computed只有被使用時才會計算搬泥，比如@observer桑寨，其他@computed，autorun等
3.3 autorun 永遠(yuǎn)不會被觀察的響應(yīng)式函數(shù)
disposer=autorun(()? ? => {
??? console.log(this.getInfo);
??? if (this.count >=5 ) {
????? this.disposer();
??? }
? });
接受一個函數(shù)作為參數(shù)忿檩，此參數(shù)函數(shù)會在使用autorun時立刻執(zhí)行一次尉尾，之后會在autorun 參數(shù)函數(shù)依賴的@observable 和@computed改變時觸發(fā)執(zhí)行
和@computed不同，autorun沒有觀察者燥透，觸發(fā)條件僅限于依賴值的改變沙咏，自動運行
autorun應(yīng)作為打印日志和更新UI的函數(shù)，不產(chǎn)生返回新值
autorun的返回值為autorun的終止函數(shù)兽掰，用來清除autorun芭碍，執(zhí)行之后autorun將不再執(zhí)行。
3.4 reaction 屬于autorun的變更版本
reaction=reaction(()? ? => this.count, count => {
??? console.log(this.count);
??? if (count >= 8) {
????? this.reaction();
??? }
? });
reaction接收兩個函數(shù)作為參數(shù)孽尽，第一個為數(shù)據(jù)函數(shù)窖壕，第二個為效果函數(shù)。數(shù)據(jù)函數(shù)的返回值作為效果函數(shù)的參數(shù)
reaction在使用時不會自動運行一次，與autorun不同
reaction只有在數(shù)據(jù)函數(shù)依賴的屬性值變化時才會執(zhí)行瞻讽，而效果函數(shù)只有在數(shù)據(jù)函數(shù)的返回值變化時才會執(zhí)行鸳吸，效果函數(shù)不會觀測屬性值的變化。
reaction的返回值是其終止函數(shù)速勇，在reaction不用時進(jìn)行清理
3.5 when
when = when(()? ? => this.object.age >= 23, () => {
??? alert(this.object.age);
? } );
when接收兩個函數(shù)作為參數(shù)晌砾，第一個為條件函數(shù)，第二個為效果函數(shù)烦磁。條件函數(shù)的返回值作為效果函數(shù)執(zhí)行的條件养匈。
條件函數(shù)會觀察屬性值的變化，并根據(jù)屬性值執(zhí)行都伪。當(dāng)其返回值為true時呕乎，執(zhí)行效果函數(shù)，并且只執(zhí)行這一次陨晶，之后when會被自動清理猬仁。
when的返回值是when的終止函數(shù)，可用于主動清除先誉。
when最多執(zhí)行一次湿刽。
