React源碼解析

前言

距離第一篇《React源碼解析(一)》已經過去将近4個月的時間，由于是我第一次進行源碼解析相關的寫作，思路和文筆還不夠成熟。一百多天以來，我基于讀者回報反思這幾篇文章中的不足，同時也在不斷學習借鑒其他優秀作者的寫作方法和寫作思路。最終總結出對于自己的源碼寫作來說，需要改進的幾點：

問題

1.示例代碼太多

這可能是源碼解析寫作的通病吧。其實大多數人從vue和react這樣架構的生命周期API就可以大緻猜出内部流程是什麼，示例代碼太多反而會産生枯燥感，而且部分示例代碼又長又臭，甚至不得不加上大段的注釋，嚴重降低了閱讀體驗。

2.解析流水賬

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

3.缺乏提煉

我們初高中上國文課的時候，總會被問到這篇文章的中心思想是什麼。同樣，寫完源碼解析和讀完源碼解析，作者和讀者收獲了什麼？很多源碼解析文章并沒有告訴我們，讀者讀完好像明白了點什麼又好像沒明白，一臉茫然。

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

改進

1.減少示例代碼，盡可能使用語言概括和圖形表達

人對圖形的接受和了解度遠遠高于對語言的處理和了解，這也是為什麼《圖解HTTP》等系列書籍暢銷全世界的原因。新的《React源碼解析》去掉了許多無用代碼和語言描述，改為使用思維導圖或流程圖，提升閱讀體驗，降低了解難度。當然，對于源碼中重要的段落依然需要展示。

2.美化文章排版

在進行必要的代碼示例時，如果代碼較長，那麼無論使用掘金編輯器還是代碼截圖，最後實際的閱讀體驗并不好，尤其在手機上時這一點更為明顯。新的《React源碼解析》将采用carbon展示代碼。

3.思想提煉

閱讀源碼的最終作用并不是為了再造一個vue/react，而是借鑒其中的思想和方法，應用到實際業務中去，最終提升我們程式設計的能力。新的《React源碼解析》将在每一篇文章的結尾闡述是什麼和為什麼，使讀者讀完有所收獲，不會似懂非懂甚至白白浪費寶貴的時間。

3.總結

新的《React源碼解析》依舊分為四篇，分别闡述React中重要的概念，目錄如下：

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

思維導圖如下圖(在mac下檢視效果最好)：

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

作者：ssssyoki

連結：https://juejin.im/post/5a84682ef265da4e83266cc4

來源：掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。