為什么使用mobx习绢？
最近項目中，使用了一種新的狀態(tài)管理工具—Mobx蝙昙，Mobx相較于redux之類的數(shù)據(jù)管理狀態(tài)工具來說：
- 學(xué)習(xí)成本更低
- 性能更好
- mobx開發(fā)難度低
- 代碼量少、渲染性能好
Mobx 安裝
使用前安裝Mobx所需要的依賴：mobx , mobx-react
npm install mobx --save
npm install mobx-react --save
引入使用
import { action, observable, runInAction, toJS } from 'mobx'; // 按需引入
import { inject, observer, Provider } from 'mobx-react';
簡單使用
通過項目實踐梧却，大致總結(jié)了使用mobx的幾個基本步驟：
1奇颠、創(chuàng)建并編寫store文件；
2放航、在父組件中烈拒，將store文件引入，并在父組件內(nèi)進(jìn)行new Store()广鳍；
3荆几、通過<Provider store={this.store}>標(biāo)簽將store傳給子組件使用；
4赊时、子組件使用時通過@inject('store名稱')吨铸，將store注入組件中去；
一祖秒、父組件
二诞吱、子組件
在子組件中舟奠，使用兩個裝飾器，即@inject, @observer就可以實時監(jiān)聽獲取store中的屬性房维，當(dāng)然需要注意的是：可以監(jiān)聽觀察的屬性是store中使用@observable包裝定義的沼瘫。如下圖：
@inject
使用@inject ('store')直接注入組件中，然后直接用this.props.store獲取就可以了咙俩。
這里的store是父組件中<Provider store={this.store}>這里的store名稱耿戚。
@observer
@observer在這里的作用，是用來將 React組件轉(zhuǎn)變成響應(yīng)式組件阿趁，以確保任何組件渲染中使用的數(shù)據(jù)變化時都可以強(qiáng)制刷新組件溅话。如果不使用@observer的話，你可以試試歌焦，就算store中的數(shù)據(jù)變了飞几，子組件也不會去刷新組件的變化。
三独撇、store文件
store文件即mobx的主要文件屑墨，以下就使用過的關(guān)鍵詞，進(jìn)行輸出纷铣。
observable
observable是一種讓數(shù)據(jù)的變化可以被觀察的方法卵史。
根據(jù)下圖舉個??，更直觀搜立。
首先以躯，通過@observable裝飾器，定義需要的屬性啄踊，因為是通過@observable包裝過的忧设，所以只要config變化，在任何組件內(nèi)都是可以監(jiān)聽到它的變化的颠通。
@action
唯一可以修改狀態(tài)的地方。
runInAction
總結(jié)
關(guān)與Mobx的其他關(guān)鍵詞顿锰，還沒有用到谨垃，待真實使用過在輸出總結(jié)。
通過實踐使用硼控，Mobx確實是一個簡單易上手的狀態(tài)管理工具??刘陶，若有理解不對的地方，請指正牢撼。
