React小知識(4) - dva源碼之dynamic

使用過dva這款輕量框架的朋友應該對dynamic.js這個文件不陌生，他負責註冊動態加載的model、渲染動態加載的component。

先聊一下本身看代碼最初沒有理解的地方^_^，dynamic()入口方法：

這句代碼咋看只是用了一個解構重命名的技巧，可是閱讀起來就會產生疑惑。resolveModels 爲何要這麼命名呢，好端端的 models 很差麼。其實這涉及到了你們對傳入dynamic 中的參數的理解。

由於傳入的是一個 promise的執行函數，由於執行後會獲得一個 promise 的結果，因此起名爲 resolveXXX。

下面這段操做，開始我是一頭霧水。

Promise.all， ret.slice(0, len), resolve(xxx) 拆開來都能看懂，爲何拼起來就看不明白了呢。

讓咱們逐步來分析一下

• [...models, component] 是什麼？

  答：動態加載 models 、component 的 promise

• ret 是什麼？

  答：全部 promise 執行完後的返回值組合而成的數組

• 爲何要作 models 的 length 判斷？

  答：方便沒有 models 時，直接 resolve(組件)

• ret.slice(0, len) 是什麼？

  答：全部 models 的返回結果組成的數組

• resolve(XXX)到底 resolve 了什麼？

  答：resolve 了一個組件

到此終於能夠搞清楚這段代碼的做用就是將加載 models、component 的 promise 執行結果的數組中的 models 拿去註冊，components resolve 到下個環節。

做爲一個有求知慾的小夥伴（其實多是個槓精），我對於源碼的探索並無止步，我發現了一個令我迷惑不解的事情this.mounted。

1. 爲何 this.load() 要在 contructor() 中執行，這個徒增了 this.mounted 變量，若是在 componentDidMount() 中去執行不該該更好麼。

2. 若是 this.state.AsyncComponent = AsyncComponent, 在 render 以後，在 componentDidMount 以前執行，會不會致使組件沒法正常展現。

因而我請教了咱們的垚哥哥，垚哥哥給出了很是讓我信服的解釋。

1. 由於若是組件很快從 componentDidMount 狀態變爲 componentWillUnmount ,好比用戶切換功能標籤很快的場景，那麼 resolve() 的異步操做仍會執行，會致使組件卸載後依然執行 this.setState 方法，致使內存泄露。
2. render, componentDidMount 雖然是生命週期的兩個方法，能夠看做是同步執行(?，準確的說不是真正的同步，可是兩個任務之間不會插入promise.then的執行，具體原理還得再研究)的，因此不存在this.state.AsyncComponent 會在二者執行之間的同時執行的問題。

經過對dva源碼的學習，收穫了一些不同的知識，分享給你們。