React16源碼解讀：開篇帶你搞懂幾個面試考點
如今，主流的前端框架React，Vue和Angular在前端領域已成三足鼎立之勢，基于前端技術棧的發(fā)展現狀，大大小小的公司或多或少也會使用其中某一項或者多項技術棧，那么掌握并熟練使用其中至少一種也成為了前端人員必不可少的技能飯碗。當然，框架的部分實現細節(jié)也常成為面試中的考察要點，因此，一方面為了應付面試官的連番追問，另一方面為了提升自己的技能水平，還是有必要對框架的底層實現原理有一定的涉獵。
當然對于主攻哪門技術棧沒有嚴格的要求，挑選你自己喜歡的就好，在面試中面試官一般會先問你最熟悉的是哪門技術棧，對于你不熟悉的領域，面試官可能也不會做太多的追問。筆者在項目中一直是使用的Vue框架，其上手門檻低，也提供了比較全面和友好的官方文檔可供參考。但是可能因人而異，感覺自己還是比較喜歡React，也說不出什么好壞，可能是自己最早接觸的前端框架吧，不過很遺憾，在之前的工作中一直派不上用場，但即便如此，也阻擋不了自己對底層原理的好奇心。所以最近也是開始研究React的源碼，并對源碼的解讀過程做一下記錄，方便加深記憶。如果你的技術棧剛好是React，并且也對源碼感興趣，那么我們可以一起互相探討技術難點，讓整個閱讀源碼的過程變得更加容易和有趣。
1、準備階段
在facebook的github上，目前React的最新版本為v16.12.0，我們知道在React的v16版本之后引入了新的Fiber架構，這種架構使得任務擁有了暫停和恢復機制，將一個大的更新任務拆分為一個一個執(zhí)行單元，充分利用瀏覽器在每一幀的空閑時間執(zhí)行任務，無空閑時間則延遲執(zhí)行，從而避免了任務的長時間運行導致阻塞主線程同步任務的執(zhí)行。為了了解這種Fiber架構，這里選擇了一個比較適中的v16.10.2的版本，沒有選擇最新的版本是因為在最新版本中移除了一些舊的兼容處理方案，雖說這些方案只是為了兼容，但是其思想還是比較先進的，值得我們推敲學習，所以先將其保留下來，這里選擇v16.10.2版本的另外一個原因是React在v16.10.0的版本中涉及到兩個比較重要的優(yōu)化點：
在上圖中指出，在任務調度(Scheduler)階段有兩個性能的優(yōu)化點，解釋如下：
將任務隊列的內部數據結構轉換成最小二叉堆的形式以提升隊列的性能(在最小堆中我們能夠以最快的速度找到最小的那個值，因為那個值一定在堆的頂部，有效減少整個數據結構的查找時間)。
使用周期更短的
postMessage循環(huán)的方式而不是使用requestAnimationFrame這種與幀邊界對齊的方式(這種優(yōu)化方案指得是在將任務進行延遲后恢復執(zhí)行的階段，前后兩種方案都是宏任務，但是宏任務也有順序之分，postMessage的優(yōu)先級比requestAnimationFrame高，這也就意味著延遲任務能夠更快速地恢復并執(zhí)行)。
當然現在不太理解的話沒關系，后續(xù)會有單獨的文章來介紹任務調度這一塊內容，遇到上述兩個優(yōu)化點的時候會進行詳細說明，在開始閱讀源碼之前，我們可以使用create-react-app來快速搭建一個React項目，后續(xù)的示例代碼可以在此項目上進行編寫：
//?項目搭建完成后React默認為最新版v16.12.0
create-react-app?react-learning
//?為了保證版本一致，手動將其修改為v16.10.2
npm?install?--save?react@16.10.2?react-dom@16.10.2
//?運行項目
npm?start
執(zhí)行以上步驟后，不出意外的話，瀏覽器中會正常顯示出項目的默認界面。得益于在Reactv16.8版本之后推出的React Hooks功能，讓我們在原來的無狀態(tài)函數組件中也能進行狀態(tài)管理，以及使用相應的生命周期鉤子，甚至在新版的create-react-app腳手架中，根組件App已經由原來的類組件的寫法升級為了推薦的函數定義組件的方式，但是原來的類組件的寫法并沒有被廢棄掉，事實上我們項目中還是會大量充斥著類組件的寫法，因此為了了解這種類組件的實現原理，我們暫且將App根組件的函數定義的寫法回退到類組件的形式，并對其內容進行簡單修改：
//?src?->?App.js
import?React,?{Component}?from?'react';
function?List({data})?{
????return?(
????????<ul?className="data-list">
????????????{
????????????????data.map(item?=>?{
????????????????????return?<li?className="data-item"?key={item}>{item}li>
????????????????})
????????????}
????????ul>
????);
}
export?default?class?App?extends?Component?{
????constructor(props)?{
????????super(props);
????????this.state?=?{
????????????data:?[1,?2,?3]
????????};
????}
????render()?{
????????return?(
????????????<div?className="container">
????????????????<h1?className="title">React?learningh1>
????????????????<List?data={this.state.data}?/>
????????????div>
????????);
????}
}
經過以上簡單修改后，然后我們通過調用
//?src?->?index.js
ReactDOM.render(<App?/>,?document.getElementById('root'));
來將組件掛載到DOM容器中，最終得到App組件的DOM結構如下所示：
<div?class="container">
????<h1?class="title">React?learningh1>
????<ul?class="data-list">
????????<li?class="data-item">1li>
????????<li?class="data-item">2li>
????????<li?class="data-item">3li>
????ul>
div>
因此我們分析React源碼的入口也將會是從ReactDOM.render方法開始一步一步分析組件渲染的整個流程，但是在此之前，我們有必要先了解幾個重要的前置知識點，這幾個知識點將會更好地幫助我們理解源碼的函數調用棧中的參數意義和其他的一些細節(jié)。
2、前置知識
首先我們需要明確的是，在上述示例中，App組件的render方法返回的是一段HTML結構，在普通的函數中這種寫法是不支持的，所以我們一般需要相應的插件來在背后支撐，在React中為了支持這種jsx語法提供了一個Babel預置工具包@babel/preset-react，其中這個preset又包含了兩個比較核心的插件：
@babel/plugin-syntax-jsx：這個插件的作用就是為了讓Babel編譯器能夠正確解析出jsx語法。@babel/plugin-transform-react-jsx：在解析完jsx語法后，因為其本質上是一段HTML結構，因此為了讓JS引擎能夠正確識別，我們就需要通過該插件將jsx語法編譯轉換為另外一種形式。在默認情況下，會使用React.createElement來進行轉換，當然我們也可以在.babelrc文件中來進行手動設置。
//?.babelrc
{
????"plugins":?[
????????["@babel/plugin-transform-react-jsx",?{
????????????"pragma":?"Preact.h",?//?default?pragma?is?React.createElement
????????????"pragmaFrag":?"Preact.Fragment",?//?default?is?React.Fragment
????????????"throwIfNamespace":?false?//?defaults?to?true
????????}]
????]
}
這里為了方便起見，我們可以直接使用Babel官方實驗室來查看轉換后的結果，對應上述示例，轉換后的結果如下所示：
//?轉換前
render()?{
????return?(
????????<div?className="container">
????????????<h1?className="title">React?learningh1>
????????????<List?data={this.state.data}?/>
????????div>
????);
}
//?轉換后
render()?{
????return?React.createElement("div",?{
????????className:?"content"
????},?
????React.createElement("header",?null,?"React?learning"),?
????React.createElement(List,?{?data:?this.state.data?}));
}
可以看到jsx語法最終被轉換成由React.createElement方法組成的嵌套調用鏈，可能你之前已經了解過這個API，或者接觸過一些偽代碼實現，這里我們就基于源碼，深入源碼內部來看看其背后為我們做了哪些事情。
2.1 createElement & ReactElement
為了保證源碼的一致性，也建議你將React版本和筆者保持一致，采用v16.10.2版本，可以通過facebook的github官方渠道進行獲取，下載下來之后我們通過如下路徑來打開我們需要查看的文件：
//?react-16.10.2?->?packages?->?react?->?src?->?React.js?
在React.js文件中，我們直接跳轉到第63行，可以看到React變量作為一個對象字面量，包含了很多我們所熟知的方法，包括在v16.8版本之后推出的React Hooks方法：
const?React?=?{
??Children:?{
????map,
????forEach,
????count,
????toArray,
????only,
??},
??createRef,
??Component,
??PureComponent,
??createContext,
??forwardRef,
??lazy,
??memo,
??//?一些有用的React?Hooks方法
??useCallback,
??useContext,
??useEffect,
??useImperativeHandle,
??useDebugValue,
??useLayoutEffect,
??useMemo,
??useReducer,
??useRef,
??useState,
??Fragment:?REACT_FRAGMENT_TYPE,
??Profiler:?REACT_PROFILER_TYPE,
??StrictMode:?REACT_STRICT_MODE_TYPE,
??Suspense:?REACT_SUSPENSE_TYPE,
??unstable_SuspenseList:?REACT_SUSPENSE_LIST_TYPE,
??//?重點先關注這里，生產模式下使用后者
??createElement:?__DEV__???createElementWithValidation?:?createElement,
??cloneElement:?__DEV__???cloneElementWithValidation?:?cloneElement,
??createFactory:?__DEV__???createFactoryWithValidation?:?createFactory,
??isValidElement:?isValidElement,
??version:?ReactVersion,
??unstable_withSuspenseConfig:?withSuspenseConfig,
??__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:?ReactSharedInternals,
這里我們暫且先關注createElement方法，在生產模式下它來自于與React.js同級別的ReactElement.js文件，我們打開該文件，并直接跳轉到第312行，可以看到createElement方法的函數定義(去除了一些__DEV__環(huán)境才會執(zhí)行的代碼)：
/**
?*?該方法接收包括但不限于三個參數，與上述示例中的jsx語法經過轉換之后的實參進行對應
?*?@param?type?表示當前節(jié)點的類型，可以是原生的DOM標簽字符串，也可以是函數定義組件或者其它類型
?*?@param?config?表示當前節(jié)點的屬性配置信息
?*?@param?children?表示當前節(jié)點的子節(jié)點，可以不傳，也可以傳入原始的字符串文本，甚至可以傳入多個子節(jié)點
?*?@returns?返回的是一個ReactElement對象
?*/
export?function?createElement(type,?config,?children)?{
??let?propName;
??//?Reserved?names?are?extracted
??//?用于存放config中的屬性，但是過濾了一些內部受保護的屬性名
??const?props?=?{};
??//?將config中的key和ref屬性使用變量進行單獨保存
??let?key?=?null;
??let?ref?=?null;
??let?self?=?null;
??let?source?=?null;
??//?config為null表示節(jié)點沒有設置任何相關屬性
??if?(config?!=?null)?{
????//?有效性判斷，判斷?config.ref?!==?undefined
????if?(hasValidRef(config))?{
??????ref?=?config.ref;
????}
????//?有效性判斷，判斷?config.key?!==?undefined
????if?(hasValidKey(config))?{
??????key?=?''?+?config.key;
????}
????self?=?config.__self?===?undefined???null?:?config.__self;
????source?=?config.__source?===?undefined???null?:?config.__source;
????//?Remaining?properties?are?added?to?a?new?props?object
????//?用于將config中的所有屬性在過濾掉內部受保護的屬性名后，將剩余的屬性全部拷貝到props對象中存儲
????//?const?RESERVED_PROPS?=?{
????//???key:?true,
????//???ref:?true,
????//???__self:?true,
????//???__source:?true,
????//?};
????for?(propName?in?config)?{
??????if?(
????????hasOwnProperty.call(config,?propName)?&&
????????!RESERVED_PROPS.hasOwnProperty(propName)
??????)?{
????????props[propName]?=?config[propName];
??????}
????}
??}
??//?Children?can?be?more?than?one?argument,?and?those?are?transferred?onto
??//?the?newly?allocated?props?object.
??//?由于子節(jié)點的數量不限，因此從第三個參數開始，判斷剩余參數的長度
??//?具有多個子節(jié)點則props.children屬性存儲為一個數組
??const?childrenLength?=?arguments.length?-?2;
??if?(childrenLength?===?1)?{
????//?單節(jié)點的情況下props.children屬性直接存儲對應的節(jié)點
????props.children?=?children;
??}?else?if?(childrenLength?>?1)?{
????//?多節(jié)點的情況下則根據子節(jié)點數量創(chuàng)建一個數組
????const?childArray?=?Array(childrenLength);
????for?(let?i?=?0;?i???????childArray[i]?=?arguments[i?+?2];
????}
????props.children?=?childArray;
??}
??//?Resolve?default?props
??//?此處用于解析靜態(tài)屬性defaultProps
??//?針對于類組件或函數定義組件的情況，可以單獨設置靜態(tài)屬性defaultProps
??//?如果有設置defaultProps，則遍歷每個屬性并將其賦值到props對象中(前提是該屬性在props對象中對應的值為undefined)
??if?(type?&&?type.defaultProps)?{
????const?defaultProps?=?type.defaultProps;
????for?(propName?in?defaultProps)?{
??????if?(props[propName]?===?undefined)?{
????????props[propName]?=?defaultProps[propName];
??????}
????}
??}
??//?最終返回一個ReactElement對象
??return?ReactElement(
????type,
????key,
????ref,
????self,
????source,
????ReactCurrentOwner.current,
????props,
??);
}
經過上述分析我們可以得出，在類組件的render方法中最終返回的是由多個ReactElement對象組成的多層嵌套結構，所有的子節(jié)點信息均存放在父節(jié)點的props.children屬性中。我們將源碼定位到ReactElement.js的第111行，可以看到ReactElement函數的完整實現：
/**
?*?為一個工廠函數，每次執(zhí)行都會創(chuàng)建并返回一個ReactElement對象
?*?@param?type?表示節(jié)點所對應的類型，與React.createElement方法的第一個參數保持一致
?*?@param?key?表示節(jié)點所對應的唯一標識，一般在列表渲染中我們需要為每個節(jié)點設置key屬性
?*?@param?ref?表示對節(jié)點的引用，可以通過React.createRef()或者useRef()來創(chuàng)建引用
?*?@param?self?該屬性只有在開發(fā)環(huán)境才存在
?*?@param?source?該屬性只有在開發(fā)環(huán)境才存在
?*?@param?owner?一個內部屬性，指向ReactCurrentOwner.current，表示一個Fiber節(jié)點
?*?@param?props?表示該節(jié)點的屬性信息，在React.createElement中通過config，children參數和defaultProps靜態(tài)屬性得到
?*?@returns?返回一個ReactElement對象
?*/
const?ReactElement?=?function(type,?key,?ref,?self,?source,?owner,?props)?{
??const?element?=?{
????//?This?tag?allows?us?to?uniquely?identify?this?as?a?React?Element
????//?這里僅僅加了一個$$typeof屬性，用于標識這是一個React?Element
????$$typeof:?REACT_ELEMENT_TYPE,
????//?Built-in?properties?that?belong?on?the?element
????type:?type,
????key:?key,
????ref:?ref,
????props:?props,
????//?Record?the?component?responsible?for?creating?this?element.
????_owner:?owner,
??};
??...
??return?element;
};
一個ReactElement對象的結構相對而言還是比較簡單，主要是增加了一個$$typeof屬性用于標識該對象是一個React Element類型。REACT_ELEMENT_TYPE在支持Symbol類型的環(huán)境中為symbol類型，否則為number類型的數值。與REACT_ELEMENT_TYPE對應的還有很多其他的類型，均存放在shared/ReactSymbols目錄中，這里我們可以暫且只關心這一種，后面遇到其他類型再來細看。
2.2 Component & PureComponent
了解完ReactElement對象的結構之后，我們再回到之前的示例，通過繼承React.Component我們將App組件修改為了一個類組件，我們不妨先來研究下React.Component的底層實現。React.Component的源碼存放在packages/react/src/ReactBaseClasses.js文件中，我們將源碼定位到第21行，可以看到Component構造函數的完整實現：
/**
?*?構造函數，用于創(chuàng)建一個類組件的實例
?*?@param?props?表示所擁有的屬性信息
?*?@param?context?表示所處的上下文信息
?*?@param?updater?表示一個updater對象，這個對象非常重要，用于處理后續(xù)的更新調度任務
?*/
function?Component(props,?context,?updater)?{
??this.props?=?props;
??this.context?=?context;
??//?If?a?component?has?string?refs,?we?will?assign?a?different?object?later.
??//?該屬性用于存儲類組件實例的引用信息
??//?在React中我們可以有多種方式來創(chuàng)建引用
??//?通過字符串的方式，如：
??//?通過回調函數的方式，如： this.inputRef = input;}?/>
??//?通過React.createRef()的方式，如：this.inputRef = React.createRef(null);?
??//?通過useRef()的方式，如：this.inputRef = useRef(null);?
??this.refs?=?emptyObject;
??//?We?initialize?the?default?updater?but?the?real?one?gets?injected?by?the
??//?renderer.
??//?當state發(fā)生變化的時候，需要updater對象去處理后續(xù)的更新調度任務
??//?這部分涉及到任務調度的內容，在后續(xù)分析到任務調度階段的時候再來細看
??this.updater?=?updater?||?ReactNoopUpdateQueue;
}
//?在原型上新增了一個isReactComponent屬性用于標識該實例是一個類組件的實例
//?這個地方曾經有面試官考過，問如何區(qū)分函數定義組件和類組件
//?函數定義組件是沒有這個屬性的，所以可以通過判斷原型上是否擁有這個屬性來進行區(qū)分
Component.prototype.isReactComponent?=?{};
/**
?*?用于更新狀態(tài)
?*?@param?partialState?表示下次需要更新的狀態(tài)
?*?@param?callback?在組件更新之后需要執(zhí)行的回調
?*/
Component.prototype.setState?=?function(partialState,?callback)?{
??...
??this.updater.enqueueSetState(this,?partialState,?callback,?'setState');
};
/**
?*?用于強制重新渲染
?*?@param?callback?在組件重新渲染之后需要執(zhí)行的回調
?*/
Component.prototype.forceUpdate?=?function(callback)?{
??this.updater.enqueueForceUpdate(this,?callback,?'forceUpdate');
};
上述內容中涉及到任務調度的會在后續(xù)講解到調度階段的時候再來細講，現在我們知道可以通過原型上的isReactComponent屬性來區(qū)分函數定義組件和類組件。事實上，在源碼中就是通過這個屬性來區(qū)分Class Component和Function Component的，可以找到以下方法：
//?返回true則表示類組件，否則表示函數定義組件
function?shouldConstruct(Component)?{
??return?!!(Component.prototype?&&?Component.prototype.isReactComponent);
}
與Component構造函數對應的，還有一個PureComponent構造函數，這個我們應該還是比較熟悉的，通過淺比較判斷組件前后傳遞的屬性是否發(fā)生修改來決定是否需要重新渲染組件，在一定程度上避免組件重渲染導致的性能問題。同樣的，在ReactBaseClasses.js文件中，我們來看看PureComponent的底層實現：
//?通過借用構造函數，實現典型的寄生組合式繼承，避免原型污染
function?ComponentDummy()?{}
ComponentDummy.prototype?=?Component.prototype;
function?PureComponent(props,?context,?updater)?{
??this.props?=?props;
??this.context?=?context;
??//?If?a?component?has?string?refs,?we?will?assign?a?different?object?later.
??this.refs?=?emptyObject;
??this.updater?=?updater?||?ReactNoopUpdateQueue;
}
//?將PureComponent的原型指向借用構造函數的實例
const?pureComponentPrototype?=?(PureComponent.prototype?=?new?ComponentDummy());
//?重新設置構造函數的指向
pureComponentPrototype.constructor?=?PureComponent;
//?Avoid?an?extra?prototype?jump?for?these?methods.
//?將Component.prototype和PureComponent.prototype進行合并，減少原型鏈查找所浪費的時間(原型鏈越長所耗費的時間越久)
Object.assign(pureComponentPrototype,?Component.prototype);
//?這里是與Component的區(qū)別之處，PureComponent的原型上擁有一個isPureReactComponent屬性
pureComponentPrototype.isPureReactComponent?=?true;
通過以上分析，我們就可以初步得出Component和PureComponent之間的差異，可以通過判斷原型上是否擁有isPureReactComponent屬性來進行區(qū)分，當然更細粒度的區(qū)分，還需要在閱讀后續(xù)的源碼內容之后才能見分曉。
3、面試考點
看完以上內容，按道理來說以下幾個可能的面試考點應該就不成問題了，或者說至少也不會遇到一個字也回答不了的尷尬局面，試試看吧：
在React中為何能夠支持
jsx語法類組件的
render方法執(zhí)行后最終返回的結果是什么手寫代碼實現一個
createElement方法如何判斷一個對象是不是
React Element如何區(qū)分類組件和函數定義組件
Component和PureComponent之間的關系如何區(qū)分
Component和PureComponent
4、總結
本文作為React16源碼解讀的開篇，先講解了幾個比較基礎的前置知識點，這些知識點有助于我們在后續(xù)分析組件的任務調度和渲染過程時能夠更好地去理解源碼。閱讀源碼的過程是痛苦的，一個原因是源碼量巨大，文件依賴關系復雜容易讓人產生恐懼退縮心理，另一個是閱讀源碼是個漫長的過程，期間可能會占用你學習其他新技術的時間，讓你無法完全靜下心來。但是其實我們要明白的是，學習源碼不只是為了應付面試，源碼中其實有很多我們可以借鑒的設計模式或者使用技巧，如果我們可以學習并應用到我們正在做的項目中，也不失為一件有意義的事情。后續(xù)文章就從ReactDOM.render方法開始，一步一步分析組件渲染的整個流程，我們也不需要去搞懂每一行代碼，畢竟每個人的思路不太一樣，但是關鍵步驟我們還是需要去多花時間理解的。
往期推薦
最后
歡迎加我微信，拉你進技術群，長期交流學習...
歡迎關注「前端Q」,認真學前端，做個專業(yè)的技術人...
