《React源碼解析》系列完結！

前言

距離第一篇《React源碼解析(一)》已通過去將近4個月的時間，因爲是我第一次進行源碼解析相關的寫做，思路和文筆還不夠成熟。一百多天以來，我基於讀者反饋反思這幾篇文章中的不足，同時也在不斷學習借鑑其餘優秀做者的寫做方法和寫做思路。最終總結出對於本身的源碼寫做來講，須要改進的幾點：

問題

1.示例代碼太多

這多是源碼解析寫做的通病吧。其實大多數人從vue和react這樣框架的生命週期API就能夠大體猜出內部流程是什麼，示例代碼太多反而會產生枯燥感，並且部分示例代碼又長又臭，甚至不得不加上大段的註釋，嚴重下降了閱讀體驗。

2.解析流水帳

既然代碼是給計算機看的流水帳，那解析就不能再是給人看的流水帳。對於源碼解析來講，最大的誤區是去弄懂每一行甚至每個變量的意義，而這最終會致使事倍功半。因此源碼解析應以高屋建瓴的意識去寫做，而不是鑽牛角尖，或者像和尚唸經同樣乾乾巴巴，逐字逐句地闡述。

3.缺少提煉

咱們初高中上語文課的時候，總會被問到這篇文章的中心思想是什麼。一樣，寫完源碼解析和讀完源碼解析，做者和讀者收穫了什麼？不少源碼解析文章並無告訴咱們，讀者讀無缺像明白了點什麼又好像沒明白，一臉茫然。

針對以上三個問題，結合已有的《React源碼解析》系列，我作出了以下改進：

改進

1.減小示例代碼，儘量使用語言歸納和圖形表達

人對圖形的接受和理解度遠遠高於對語言的處理和理解，這也是爲何《圖解HTTP》等系列書籍暢銷全世界的緣由。新的《React源碼解析》去掉了許多無用代碼和語言描述，改成使用思惟導圖或流程圖，提高閱讀體驗，下降理解難度。固然，對於源碼中重要的段落依然須要展現。

2.美化文章排版

在進行必要的代碼示例時，若是代碼較長，那麼不管使用掘金編輯器仍是代碼截圖，最後實際的閱讀體驗並很差，尤爲在手機上時這一點更爲明顯。新的《React源碼解析》將採用carbon展現代碼。

3.思想提煉

閱讀源碼的最終做用並非爲了再造一個vue/react，而是借鑑其中的思想和方法，應用到實際業務中去，最終提高咱們編程的能力。新的《React源碼解析》將在每一篇文章的結尾闡述是什麼和爲何，使讀者讀完有所收穫，不會似懂非懂甚至白白浪費寶貴的時間。

3.總結

新的《React源碼解析》依舊分爲四篇(基於v15)，分別闡述React中重要的概念，目錄以下：

• 《React源碼解析(一):組件的實現與掛載》
• 《React源碼解析(二):組件的類型與生命週期》
• 《React源碼解析(三):詳解事務與隊列》
• 《React源碼解析(四):事件系統》

思惟導圖以下圖(在mac下查看效果最好)：

四篇文章對導圖的每一個部分都作了詳細的說明。若有欠妥之處，歡迎讀者朋友們不吝指正和討論，共同窗習進步。

聯繫郵箱：ssssyoki@foxmail.com