react生命周期函數使用箭頭函數,導致mobx-react問題
最近新人加入了項目,遇到了一個很奇怪的問題。mobx observable 屬性,onChange的時候就是頁面不會刷新。
試來試去,就是不知道什麽原因,後來其他同事查到是因為componentWillMount寫成了箭頭函數,真的是防不勝防啊。
錯誤代碼如下,componentWillMount的箭頭函數去掉就妥妥的對的
whyRun函數運行的結果如下,顯示的意思是沒有在收集依賴的函數中運行
whyRun() can only be used if a derivation is active, or by passing an computed value / reaction explicitly.
If you invoked whyRun from inside a computation;
the computation is currently suspended but re-evaluating because somebody requested its value.
但是為什麽呢??那只能看看mobx-react源代碼了,下面observer方法的截圖,刪除了幾行,通過mixinLifecycleEvents對react組件的生命周期函數進行了擴展
下面是patch方法的實現,是不是有種切面編程,函數after,before的影子
具體"componentWillMount", "componentDidMount", "componentWillUnmount", "componentDidUpdate"方法進行了哪些擴展,不是今天的重點(我也不是很清楚)。
componentWillMount的擴展比較重要,
主要做了下面幾件事
props,state 通過 Atom 對象封裝
定義方法initialRender,創建 Reaction對象(當可監聽依賴變化的時候,觸發組件forceUpdate),跟蹤收集 原render函數 裏面的依賴
用initialRender覆蓋原render函數
當組件componentWillMount函數,使用了箭頭函數,就會在組件 constructor 方法中,bind this並直接覆蓋方法,使得mobx-react都白幹了,
所以whyRun也會提示沒有在收集跟蹤方法中運行了。
在代碼中箭頭函數還是不能濫用啊~~
react生命周期函數使用箭頭函數,導致mobx-react問題