原文地址:mobx-reactreact
文本是 mobx 源碼解讀系列 第五篇git
本系列文章所有采用 mobx 較新版本:v5.13.0es6
mobx 源碼解讀 issue,歡迎討論github
在閱讀以前,但願你對如下技術有所瞭解或實踐,否則可能會影響你對本文的理解數組
本文是 mobx 源碼解讀系列
的最後一篇,短短的五篇文章,對整個 mobx
只能講了個大概,源碼愛好者們請自行深挖寶藏
最後一篇講 mobx-react
,自從 react
推出 hooks
以後,那鏈接 mobx
和 react
不要太簡單
mobx-react
6 版本配合了 mobx-react-lite 來處理 function component
上篇講 autorun
如何向 reaction
傳參埋了個坑(詳見:上篇),如今來填填
其實最直接的回答就是:view
函數執行的結果,其餘地方(庫)還要使用呀
先從 mobx-react-lite 出發
在 observer 中傳入 baseComponent 組件,傳參執行後使用 useObserver 包了一層並將其返回
因此鏈接函數組件的核心就是:useObserver
先經過 hooks 寫了個 useForceUpdate,和類組件的 this.forceUpdate 同理,即從新執行函數組件
而後 new Reaction,onInvalidate 傳的是 forceUpdate,下面 track 放在 useObserver 中執行,裏面調用 fn(即 view),即每次 render,reaction 都能收集組件中依賴的 observable 並返回其值供視圖渲染
同時利用閉包將 fn 執行的結果 rendering return 出去供 react 使用
另外一方面組件依賴的 observable 變化後會觸發 onInvalidate,注意這裏是 forceUpdate,會從新走一遍函數組件,從而綁定新一輪的依賴
因此爲何不能在 Reaction 構造函數中直接傳 view,由於 fn 執行的結果 react 會使用,並且經過 state 改變致使的 render 與 mobx 無瓜,你不能全靠 mobx 幫你執行 view 呀
mobx 要作的就是通知從新渲染,即調用 forceUpdate,這也是咱們對 mobx-react 的最初理解嘛
再補充下 autorun,爲啥要將 track 和 view 湊在一塊兒造成 onInvalidate(數據變化時 onInvalidate 調用 track,track 調用 view 收集依賴並更新視圖),其實說白了就是 autorun 沒有像 forceUpdate 同樣,從新執行 autorun 的能力,你細品
熟悉 hooks 應該一下就猜到了,其實就是個 useState
建立一個 useState,將 setTick 方法返回,每次執行 setTick 不就 forceUpdate 了嗎
useUnmount 更簡單,不說了
也很簡單,獲取 children 用 useObserver 包一下完事
而後看看 mobx-react 項目中處理 class 組件,換湯不換藥,兩點:
Reaction 構造函數中傳 forceUpdate
調用 track 時執行 view,利用閉包將結果返回給 react
首先判斷是否爲 forwardRef 函數,用上面說的 Observer 組件鏈接
普通函數組件用 mobx-react-lite 導出的 observer 便可
先對 props 和 state 簡單劫持,獲取 get 和 set 代理從而提交 reportObserved 和 reportChanged(詳見:第三篇)
而後獲取 baseRender 傳入 makeComponentReactive
componentWillUnmount 也重寫了下,爲了調用 reaction.dispose
不用多說,看圖
歡迎在 mobx 源碼解讀 issue 中討論~
推薦:minbx: mini mobx
,供學習使用,歡迎 pr:minbx 項目地址
碼字不易,喜歡的記得點 ❤️ 哦
ps:整個系列都完結了那些常年白嫖的,該出來點點贊,留留言的吧
pps:祝各位都能全部收穫,有問題 issue 見~~