Mobx填坑與重要知識點積累

標籤： React MobX

最近項目中使用了React開發，一開始功能簡單，所以狀態管理完全使用state和props來處理，但是由於項目是個實時系統，數據流慢慢變得不好控制，通過再三對比，在Redux和MobX中選擇了MobX，以下簡單記錄了重構中的一些問題和知識點積累。

填坑：mobx與Echarts的問題

在使用Echarts的項目中，由於Echarts中的data使用isArray判斷是否是數組，如果不是數組會報錯，而如果這個數據正好是直接從mobx中的store取出的數據，那麼就會發生錯誤，因為mobx中的數組類型是類數組，如果使用instanceof Array，會發現返回true，但是用isArray判斷則返回false，處理的方案是對mobx中的數組，使用時使用slice生成一個真正的Array即可。這一點在MobX的文檔中就有說明，不過第一次看文檔時沒有留意，導致項目中瞎搞了很久。

const EasyOption = { xAxis: [ { type: category, data: props.data.names.slice(), axisTick: { alignWithLabel: true } } ], yAxis: [ { type: value } ], series: [ { name: 數據展示, type: bar, barWidth: 60%, data: props.data.values.slice(),//轉化為真正的數組 } ] };

知識點積累

1. Mobx里啟用嚴格模式的函數就是useStrict，注意和原生JS的"use strict"不是一個東西。如果設置成嚴格模式，則只有@action才可以修改觀測中的值。

2. action只能影響當前運行的函數，而不能影響函數中的非同步回調函數，因此需要對非同步回調函數也使用action標註。如果是用async function，則可以使用runInAction函數來解決。

class Store { @observable name = ; @action load = async () => { const data = await getData(); runInAction(() => {this.name = data.name; }); }}

3. 加上@compute的作用在於可以使用mobx的緩存策略自動優化系統，當計算結果不變的情況下，不會引起無用的渲染，有了這個屬性，才真的可以做到在JSX中只有render函數，所有組件需要的數據只有兩種：基礎數據和可以通過基礎數據計算轉化的數據。

@computed get getValue() { return this.value * 10; } getTheValue() { return this.value * 10; }

4. React組件中可以直接添加@observable修飾的變數

@observerclass MyComponent extends React.Component { state = { a: 0 }; @observable b = 1; render() { return( <div> {this.state.a} {this.b} </div> ) }}

在添加@observer後，你的**組件會多一個生命周期componentWillReact**。當組件內被observable觀測的數據改變後，就會觸發這個生命周期。

注意setState並不會觸發這個生命周期！state中的數據和observable數據並不算是一類。

另外被observable觀測數據的修改是同步的，不像setState那樣是非同步，這點給我們帶了很大便利。如果想要讓setState同步還要使用setState的第二個參數解決。