作者 | Video++極鏈科技前端Team超凡

整理 | 包包

前言

React 起源于 Facebook 的內(nèi)部項(xiàng)目，是一個(gè)用于構(gòu)建用戶界面的 Javascript 庫。其擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。

本文希望通過參考 React 源碼，依葫蘆畫瓢地完成React的雛形。來幫助理解其內(nèi)部的實(shí)現(xiàn)原理，知其然更要知其所以然。

虛擬DOM(Virtual DOM)

了解React的都知道，其高效的原因，是因?yàn)镽eact按照頁面的DOM結(jié)構(gòu)，利用Javascript在內(nèi)存中構(gòu)建了一套相同結(jié)構(gòu)的虛擬內(nèi)存樹模型，這個(gè)內(nèi)存模型就稱為Virtual DOM。每當(dāng)頁面產(chǎn)生了變化，React的diff算法會先在內(nèi)存模型中進(jìn)行比對，提取出差異點(diǎn)，在將Virtual DOM轉(zhuǎn)化為原生DOM輸出時(shí)，按照差異點(diǎn)，只patch出有變動(dòng)的部分。

下面是VirtualDOM節(jié)點(diǎn)的定義：

入口

一切都是從 React.render(, document.body) 開始的，所以先來看看 React是怎么定義的？

React中主要包括：

? render(virtualDom, container) 命令式調(diào)用，一般用于應(yīng)用入口，將虛擬DOM渲染在container容器中；

? createElement(name, props, children) 創(chuàng)建組件時(shí)使用，JSX是其語法糖；

? Component 以ES6中的類式語法聲明時(shí)使用。

createElement(type, props, children)

createElement()的主要作用是根據(jù)給定type創(chuàng)建Virtual DOM節(jié)點(diǎn)，JSX是它的語法糖形式；其type參數(shù)可以是原生的html標(biāo)簽名（如：div、tag等），也可以是React組件類或函數(shù)。

組件的實(shí)現(xiàn)

React的所有組件，按照類型可以分為三種：

? 文本展示類型 (TextComponent)

? 原生DOM類型 (DomComponent)

? 自定義類型 (CompositeComponent)

每種類型的組件，都需要處理初始化和更新兩種邏輯，具體會在下面兩個(gè)函數(shù)中實(shí)現(xiàn)：

? mountComponent(rootNodeId) 用于處理初始化邏輯

? updateComponent() 用于處理更新邏輯

初始化mountComponent()的實(shí)現(xiàn)

mountComponent()的實(shí)現(xiàn)思路是，根據(jù)virtual Dom對象生成HTML代碼并返回。

首先定義類型組件的基類Component，它只是簡單地記錄了傳入的virtualDom對象，并初始化了組件節(jié)點(diǎn)ID。

下面是不同類型組件初始化渲染邏輯的各自實(shí)現(xiàn)。

? TextComponent

作為純展示類型組件，TextComponent 只是簡單地將需要展示的內(nèi)容，使用標(biāo)簽包裝并返回就可以了。

? DomComponent

DomComponent類型在處理原生DOM時(shí)，需要額外注意一下原生事件部分的處理。

? CompositeComponent

在實(shí)現(xiàn)CompositeComponent類型的初始化渲染邏輯之前，先看一下React組件的定義語法。

聲明語法中，App繼承自React.Component，所以我們先來實(shí)現(xiàn)Component這個(gè)類。

這里的 React.Component 不要與上面的 Component 混淆， Component 是不同組件類型的基類，抽象了組件渲染與更新；而React.Component則是Composite這種類型組件聲明時(shí)的基類。

在 React.Component 中，簡單地聲明了控制數(shù)據(jù)流向的props屬性，以及組件實(shí)例內(nèi)部用于觸發(fā)更新的setState()函數(shù)。

在了解了 React.Component 的定義之后，我們回到 CompositeComponent ，開始實(shí)現(xiàn)mountComponent()的邏輯。

首先要了解的是，在composite類型組件中，vDom對象中的type，指向的是組件類的定義， 因此 mountComponent() 函數(shù)要做的工作，就是使用vDom的props屬性來創(chuàng)建一個(gè)type的實(shí)例。

思考一下，在JSX語法中，解析器碰到 標(biāo)簽后，就會去查找到 MyInput 的定義，上面說過JSX只是createElement的語法糖，因此背后調(diào)用的是 React.createElement(MyInput) 。在React規(guī)范中，可以使用類或函數(shù)來聲明組件，因此在 mountComponent() 中使用 new type() ，就可以構(gòu)造出MyInput的實(shí)例了。

更新流程updateComponent()的實(shí)現(xiàn)

實(shí)現(xiàn)完組件的初始化之后，接下來要實(shí)現(xiàn)組件的更新邏輯。

React開放了 setState() 用于組件更新，回顧上面 React.Component 中 setState() 的定義， 實(shí)際調(diào)用的是 this._reactInternalInstance.updateComponent(null, newState) 這個(gè)函數(shù)。而 this._reactInternalInstance指向CompositeComponent，困此更新邏輯交回CompositeComponent.updateComponent()來完成。

? CompositeComponent

Composite類型組件的更新函數(shù)，需要處理兩種流程：

1. 當(dāng)被定義在其它組件的render函數(shù)中時(shí)，其包裹組件會構(gòu)建出新的vDom對象，根據(jù)傳入新的vDom來處理更新；

2. 當(dāng)組件內(nèi)部使用setState()觸發(fā)時(shí)，根據(jù)新的state來更新；

了解這兩種方式的區(qū)別，可以幫助我們理解下面updateComponent函數(shù)的實(shí)現(xiàn)。

我們梳理一下更新流程：

1. 組件在初始化時(shí)，記錄下了render組件的實(shí)例，即this._renderedComponent；

2. 在更新環(huán)節(jié)，重新render()得到新的VDomnextRenderVDom；

3. 通過比對前后兩個(gè)VDom的type和key，來判斷是執(zhí)行原來_renderedComponent的updateComponent函數(shù)，還是重新生成新的組件；

上面使用到了shouldUpdateReactComponent這個(gè)比對函數(shù)，來對vDom的type和key進(jìn)行比對，其實(shí)現(xiàn)如下：

上面這個(gè)處理邏輯，就是diff算法的第一個(gè)規(guī)則： 當(dāng)兩個(gè)VDom節(jié)點(diǎn)的類型不一致時(shí)，重新構(gòu)建該組件的Virtual DOM樹結(jié)構(gòu)。

? TextComponent Text類型組件作為顆粒度最小的組件，更新邏輯非常簡單，展示新的文本內(nèi)容即可。

? DomComponent

因?yàn)閐iff算法的介入，Dom類型的處理邏輯相對復(fù)雜。 可以分兩步來處理，第一步更新組件輸出的容器DOM上面的屬性；第二步處理子級DOM。

_updateProperties()函數(shù)對比新舊props，完成屬性及事件的處理。 特別注意一下事件處理部分，需要注銷掉原來DOM上注冊的事件。

_updateDOMChildren() 用于處理children部分的更新， 這部分的邏輯相對復(fù)雜，也是diff算法的優(yōu)化點(diǎn)所在。

注：下面的說明中，以名稱中含'children'來標(biāo)識 集合，'child'指代 集合項(xiàng)。

i. 使用 nextChildrenVDoms 數(shù)據(jù)生成新的nextChildrenComponent；

?DomComponent在初始化流程中，_mountComponent()函數(shù)會將組件集合保存下來，存入實(shí)例的_renderedChildrenComponent屬性中， 通過遍歷該屬性，可以取得childComponent實(shí)例上的_vDom；

?使用vDom來生成標(biāo)識索引key，并以childComponent作為索引值，生成childrenComponent的Map結(jié)構(gòu)； （對于Compotite類型，使用vDom.key作為標(biāo)識索引key； 對于Text和Dom類型，使用childComponent在childrenComponent中所處的索引位置作為標(biāo)識索引key)；

?使用nextChildrenVDoms生成新nextChildrenComponent的Map結(jié)構(gòu)； 在遍歷vDom集合的過程中，會使用上面的標(biāo)識索引key生成規(guī)則，來進(jìn)行判定，看是復(fù)用之前的組件實(shí)例觸發(fā)更新，還是創(chuàng)建一個(gè)新的組件；

ii. 經(jīng)過上面一步得到Map結(jié)構(gòu)的prevChildren和nextChildren之后， 會使用深度遍歷算法，遞歸地比對樹結(jié)構(gòu)中，相同層級和位置的兩個(gè)組件，將差異點(diǎn)保存為特定的diff標(biāo)識結(jié)構(gòu)，存入diffQueue隊(duì)列中；

iii. 遍歷diffQueue，按照差異的類型，完成最終HTML DOM的變動(dòng)；

首先是_updateDOMChildren()里的的定義。由于在遞歸組件樹的節(jié)點(diǎn)時(shí)，存在多次觸發(fā)_updateDOMChildren()的情況； 因此使用_updateDepth變量，在比對操作前+1，完成后-1，來判定整個(gè)樹的更新是否全部完成，繼而調(diào)用_patch()完成HTML DOM的更新；

下面的_diff()中，實(shí)現(xiàn)了更新步驟中的1和2。

值得注意的是_diff過程中l(wèi)astIndex變量的作用，其記錄在遍歷過程中，每次訪問到的prevChildrenComponent中位置最靠后的組件，這是組件更新的一種排序上面的優(yōu)化策略，可以參見這一篇文章當(dāng)中的詳細(xì)介紹：不可思議的react diff。

在計(jì)算出diffQueue的差異隊(duì)列后，在_patch()函數(shù)中完成最終HTML DOM的更新：

總結(jié)

至此，我們實(shí)現(xiàn)了一個(gè)簡易版本的React框架，完成了組件類的定義、初始化及更新； 并且梳理了核心diff算法。

下面簡單做一下總結(jié)：

? 組件分為3種類型來處理組件的初始化渲染和更新：TextComponent、DomComponent和CompositeComponent;

? virtualDom對象中，記錄了組件類型type，唯一標(biāo)識key和屬性集合props；

? 組件是由virtual Dom創(chuàng)建而來，vDom上的type和key用來標(biāo)識組件實(shí)例的唯一性；

? diff算法的核心，是對比新舊vDom對象，來完成部分組件實(shí)例的復(fù)用，并加入了排序優(yōu)化策略。 通過javascript大量計(jì)算的代價(jià)，來換取減少頁面DOM重排的消耗，從而提高了渲染性能；

相關(guān)資料：

https://github.com/Matt-Esch/virtual-dom

https://zhuanlan.zhihu.com/p/20346379