React原始碼解析

2021-08-31 16:06:03 字數 1100 閱讀 6496

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

1.示例**太多

這可能是原始碼解析寫作的通病吧。其實大多數人從vue和react這樣框架的生命週期api就可以大致猜出內部流程是什麼,示例**太多反而會產生枯燥感,而且部分示例**又長又臭,甚至不得不加上大段的注釋,嚴重降低了閱讀體驗。

2.解析流水賬

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

3.缺乏提煉

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

針對以上三個問題,結合已有的《react原始碼解析》系列,我做出了如下改進:

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

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

2.美化文章排版

在進行必要的**示例時,如果**較長,那麼無論使用掘金編輯器還是**截圖,最後實際的閱讀體驗並不好,尤其在手機上時這一點更為明顯。新的《react原始碼解析》將採用carbon展示**。

3.思想提煉

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

新的《react原始碼解析》依舊分為四篇,分別闡述react中重要的概念,目錄如下:

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

React16 2原始碼解析

16.2的原始碼相較與16.4的原始碼生命週期還未改變,但是fiber架構已經實現。本原始碼解析主要是為了弄懂react的渲染流程和執行機制。斷點除錯 看原始碼並console.log react16.2原始碼解析 fiber架構 react16.2原始碼解析 頁面渲染流程 react16.2原始碼...

React原始碼解析 四 react ref

平時我們可能會有這樣的需求,就是需要獲取某個dom節點或者子元件的例項來更新,而並不是只是通過props等來更新dom節點或者元件。如果沒有乙個好的方法我們可能自己去獲取節點 例 queryselector等 或者去繫結事件來進行一些操作,而且自己還要去管理獲取的一些相關的東西,這樣可能會不方便。那...

react 原始碼defaultProps實現

首先我們回顧一下 defaultprops 的用法import react from react render name hello react 這樣我們就可以得到乙個渲染出hello react的介面啦。此時的關鍵,在於需要理解 reactdom.render 實際執行了什麼方法。經過斷點除錯,我...