1. 程式人生 > >react生命周期函數使用箭頭函數,導致mobx-react問題

react生命周期函數使用箭頭函數,導致mobx-react問題

pda component sid cto 去掉 收集 後來 str 同事

最近新人加入了項目,遇到了一個很奇怪的問題。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問題