前言

距離第一篇《React源碼解析(一)》已經(jīng)過去將近4個(gè)月的時(shí)間，由于是我第一次進(jìn)行源碼解析相關(guān)的寫作，思路和文筆還不夠成熟。一百多天以來，我基于讀者反饋反思這幾篇文章中的不足，同時(shí)也在不斷學(xué)習(xí)借鑒其他優(yōu)秀作者的寫作方法和寫作思路。最終總結(jié)出對(duì)于自己的源碼寫作來說，需要改進(jìn)的幾點(diǎn)：

問題

1.示例代碼太多

這可能是源碼解析寫作的通病吧。其實(shí)大多數(shù)人從vue和react這樣框架的生命周期API就可以大致猜出內(nèi)部流程是什么，示例代碼太多反而會(huì)產(chǎn)生枯燥感，而且部分示例代碼又長又臭，甚至不得不加上大段的注釋，嚴(yán)重降低了閱讀體驗(yàn)。

2.解析流水賬

既然代碼是給計(jì)算機(jī)看的流水賬，那解析就不能再是給人看的流水賬。對(duì)于源碼解析來說，最大的誤區(qū)是去弄懂每一行甚至每一個(gè)變量的意義，而這最終會(huì)導(dǎo)致事倍功半。所以源碼解析應(yīng)以高屋建瓴的意識(shí)去寫作，而不是鉆牛角尖，或者像和尚念經(jīng)一樣干干巴巴，逐字逐句地闡述。

3.缺乏提煉

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

針對(duì)以上三個(gè)問題，結(jié)合已有的《React源碼解析》系列，我做出了如下改進(jìn)：

改進(jìn)

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

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

2.美化文章排版

在進(jìn)行必要的代碼示例時(shí)，如果代碼較長，那么無論使用掘金編輯器還是代碼截圖，最后實(shí)際的閱讀體驗(yàn)并不好，尤其在手機(jī)上時(shí)這一點(diǎn)更為明顯。新的《React源碼解析》將采用carbon展示代碼。

3.思想提煉

閱讀源碼的最終作用并不是為了再造一個(gè)vue/react，而是借鑒其中的思想和方法，應(yīng)用到實(shí)際業(yè)務(wù)中去，最終提升我們編程的能力。新的《React源碼解析》將在每一篇文章的結(jié)尾闡述是什么和為什么，使讀者讀完有所收獲，不會(huì)似懂非懂甚至白白浪費(fèi)寶貴的時(shí)間。

3.總結(jié)

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

• 《React源碼解析(一):組件的實(shí)現(xiàn)與掛載》
• 《React源碼解析(二):組件的類型與生命周期》
• 《React源碼解析(三):詳解事務(wù)與隊(duì)列》
• 《React源碼解析(四):事件系統(tǒng)》

思維導(dǎo)圖如下圖(在mac下查看效果最好)：

四篇文章對(duì)導(dǎo)圖的每個(gè)部分都做了詳細(xì)的說明。如有欠妥之處，歡迎讀者朋友們不吝指正和討論，共同學(xué)習(xí)進(jìn)步。

聯(lián)系郵箱：ssssyoki@foxmail.com

總結(jié)

以上是生活随笔為你收集整理的《React源码解析》系列完结！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。