引言
如今，主流的前端框架React，Vue和Angular在前端領域已成三足鼎立之勢，基於前端技術棧的發展現狀，大大小小的公司或多或少也會使用其中某一項或者多項技術棧，那么掌握並熟練使用其中至少一種也成為了前端人員必不可少的技能飯碗。當然，框架的部分實現細節也常成為面試中的考察要點，因此，一方面為了應付面試官的連番追問，另一方面為了提升自己的技能水平，還是有必要對框架的底層實現原理有一定的涉獵。
當然對於主攻哪門技術棧沒有嚴格的要求，挑選你自己喜歡的就好，在面試中面試官一般會先問你最熟悉的是哪門技術棧，對於你不熟悉的領域，面試官可能也不會做太多的追問。筆者在項目中一直是使用的Vue框架，其上手門檻低，也提供了比較全面和友好的官方文檔可供參考。但是可能因人而異，感覺自己還是比較喜歡React，也說不出什么好壞，可能是自己最早接觸的前端框架吧，不過很遺憾，在之前的工作中一直派不上用場，但即便如此，也阻擋不了自己對底層原理的好奇心。所以最近也是開始研究React的源碼，並對源碼的解讀過程做一下記錄，方便加深記憶。如果你的技術棧剛好是React，並且也對源碼感興趣，那么我們可以一起互相探討技術難點，讓整個閱讀源碼的過程變得更加容易和有趣。源碼中如果有理解錯誤的地方，還希望能夠指出。
1、准備階段
在facebook的github上，目前React的最新版本為v16.12.0，我們知道在React的v16版本之后引入了新的Fiber架構，這種架構使得任務擁有了暫停和恢復機制，將一個大的更新任務拆分為一個一個執行單元，充分利用瀏覽器在每一幀的空閑時間執行任務，無空閑時間則延遲執行，從而避免了任務的長時間運行導致阻塞主線程同步任務的執行。為了了解這種Fiber架構，這里選擇了一個比較適中的v16.10.2的版本，沒有選擇最新的版本是因為在最新版本中移除了一些舊的兼容處理方案，雖說這些方案只是為了兼容，但是其思想還是比較先進的，值得我們推敲學習，所以先將其保留下來，這里選擇v16.10.2版本的另外一個原因是React在v16.10.0的版本中涉及到兩個比較重要的優化點：
在上圖中指出，在任務調度(Scheduler)階段有兩個性能的優化點，解釋如下：
- 將任務隊列的內部數據結構轉換成最小二叉堆的形式以提升隊列的性能(在最小堆中我們能夠以最快的速度找到最小的那個值，因為那個值一定在堆的頂部，有效減少整個數據結構的查找時間)。
- 使用周期更短的
postMessage循環的方式而不是使用requestAnimationFrame這種與幀邊界對齊的方式(這種優化方案指得是在將任務進行延遲后恢復執行的階段，前后兩種方案都是宏任務，但是宏任務也有順序之分，postMessage的優先級比requestAnimationFrame高，這也就意味着延遲任務能夠更快速地恢復並執行)。
當然現在不太理解的話沒關系，后續會有單獨的文章來介紹任務調度這一塊內容，遇到上述兩個優化點的時候會進行詳細說明，在開始閱讀源碼之前，我們可以使用create-react-app來快速搭建一個React項目，后續的示例代碼可以在此項目上進行編寫：
// 項目搭建完成后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
執行以上步驟后，不出意外的話，瀏覽器中會正常顯示出項目的默認界面。得益於在Reactv16.8版本之后推出的React Hooks功能，讓我們在原來的無狀態函數組件中也能進行狀態管理，以及使用相應的生命周期鈎子，甚至在新版的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 learning</h1>
<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 learning</h1>
<ul class="data-list">
<li class="data-item">1</li>
<li class="data-item">2</li>
<li class="data-item">3</li>
</ul>
</div>
因此我們分析React源碼的入口也將會是從ReactDOM.render方法開始一步一步分析組件渲染的整個流程，但是在此之前，我們有必要先了解幾個重要的前置知識點，這幾個知識點將會更好地幫助我們理解源碼的函數調用棧中的參數意義和其他的一些細節。
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 learning</h1>
<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__環境才會執行的代碼)：
/**
* 該方法接收包括但不限於三個參數，與上述示例中的jsx語法經過轉換之后的實參進行對應
* @param type 表示當前節點的類型，可以是原生的DOM標簽字符串，也可以是函數定義組件或者其它類型
* @param config 表示當前節點的屬性配置信息
* @param children 表示當前節點的子節點，可以不傳，也可以傳入原始的字符串文本，甚至可以傳入多個子節點
* @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表示節點沒有設置任何相關屬性
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.
// 由於子節點的數量不限，因此從第三個參數開始，判斷剩余參數的長度
// 具有多個子節點則props.children屬性存儲為一個數組
const childrenLength = arguments.length - 2;
if (childrenLength === 1) {
// 單節點的情況下props.children屬性直接存儲對應的節點
props.children = children;
} else if (childrenLength > 1) {
// 多節點的情況下則根據子節點數量創建一個數組
const childArray = Array(childrenLength);
for (let i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
props.children = childArray;
}
// Resolve default props
// 此處用於解析靜態屬性defaultProps
// 針對於類組件或函數定義組件的情況，可以單獨設置靜態屬性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對象組成的多層嵌套結構，所有的子節點信息均存放在父節點的props.children屬性中。我們將源碼定位到ReactElement.js的第111行，可以看到ReactElement函數的完整實現：
/**
* 為一個工廠函數，每次執行都會創建並返回一個ReactElement對象
* @param type 表示節點所對應的類型，與React.createElement方法的第一個參數保持一致
* @param key 表示節點所對應的唯一標識，一般在列表渲染中我們需要為每個節點設置key屬性
* @param ref 表示對節點的引用，可以通過React.createRef()或者useRef()來創建引用
* @param self 該屬性只有在開發環境才存在
* @param source 該屬性只有在開發環境才存在
* @param owner 一個內部屬性，指向ReactCurrentOwner.current，表示一個Fiber節點
* @param props 表示該節點的屬性信息，在React.createElement中通過config，children參數和defaultProps靜態屬性得到
* @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類型的環境中為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構造函數的完整實現：
/**
* 構造函數，用於創建一個類組件的實例
* @param props 表示所擁有的屬性信息
* @param context 表示所處的上下文信息
* @param updater 表示一個updater對象，這個對象非常重要，用於處理后續的更新調度任務
*/
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中我們可以有多種方式來創建引用
// 通過字符串的方式，如：<input type="text" ref="inputRef" />
// 通過回調函數的方式，如：<input type="text" ref={(input) => this.inputRef = input;} />
// 通過React.createRef()的方式，如：this.inputRef = React.createRef(null); <input type="text" ref={this.inputRef} />
// 通過useRef()的方式，如：this.inputRef = useRef(null); <input type="text" ref={this.inputRef} />
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
// 當state發生變化的時候，需要updater對象去處理后續的更新調度任務
// 這部分涉及到任務調度的內容，在后續分析到任務調度階段的時候再來細看
this.updater = updater || ReactNoopUpdateQueue;
}
// 在原型上新增了一個isReactComponent屬性用於標識該實例是一個類組件的實例
// 這個地方曾經有面試官考過，問如何區分函數定義組件和類組件
// 函數定義組件是沒有這個屬性的，所以可以通過判斷原型上是否擁有這個屬性來進行區分
Component.prototype.isReactComponent = {};
/**
* 用於更新狀態
* @param partialState 表示下次需要更新的狀態
* @param callback 在組件更新之后需要執行的回調
*/
Component.prototype.setState = function(partialState, callback) {
...
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
/**
* 用於強制重新渲染
* @param callback 在組件重新渲染之后需要執行的回調
*/
Component.prototype.forceUpdate = function(callback) {
this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};
上述內容中涉及到任務調度的會在后續講解到調度階段的時候再來細講，現在我們知道可以通過原型上的isReactComponent屬性來區分函數定義組件和類組件。事實上，在源碼中就是通過這個屬性來區分Class Component和Function Component的，可以找到以下方法：
// 返回true則表示類組件，否則表示函數定義組件
function shouldConstruct(Component) {
return !!(Component.prototype && Component.prototype.isReactComponent);
}
與Component構造函數對應的，還有一個PureComponent構造函數，這個我們應該還是比較熟悉的，通過淺比較判斷組件前后傳遞的屬性是否發生修改來決定是否需要重新渲染組件，在一定程度上避免組件重渲染導致的性能問題。同樣的，在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的區別之處，PureComponent的原型上擁有一個isPureReactComponent屬性
pureComponentPrototype.isPureReactComponent = true;
通過以上分析，我們就可以初步得出Component和PureComponent之間的差異，可以通過判斷原型上是否擁有isPureReactComponent屬性來進行區分，當然更細粒度的區分，還需要在閱讀后續的源碼內容之后才能見分曉。
3、面試考點
看完以上內容，按道理來說以下幾個可能的面試考點應該就不成問題了，或者說至少也不會遇到一個字也回答不了的尷尬局面，試試看吧：
- 在React中為何能夠支持
jsx語法 - 類組件的
render方法執行后最終返回的結果是什么 - 手寫代碼實現一個
createElement方法 - 如何判斷一個對象是不是
React Element - 如何區分類組件和函數定義組件
Component和PureComponent之間的關系- 如何區分
Component和PureComponent
4、總結
本文作為React16源碼解讀的開篇，先講解了幾個比較基礎的前置知識點，這些知識點有助於我們在后續分析組件的任務調度和渲染過程時能夠更好地去理解源碼。閱讀源碼的過程是痛苦的，一個原因是源碼量巨大，文件依賴關系復雜容易讓人產生恐懼退縮心理，另一個是閱讀源碼是個漫長的過程，期間可能會占用你學習其他新技術的時間，讓你無法完全靜下心來。但是其實我們要明白的是，學習源碼不只是為了應付面試，源碼中其實有很多我們可以借鑒的設計模式或者使用技巧，如果我們可以學習並應用到我們正在做的項目中，也不失為一件有意義的事情。后續文章就從ReactDOM.render方法開始，一步一步分析組件渲染的整個流程，我們也不需要去搞懂每一行代碼，畢竟每個人的思路不太一樣，但是關鍵步驟我們還是需要去多花時間理解的。
5、交流
如果你覺得這篇文章的內容對你有幫助，能否幫個忙關注一下筆者的公眾號[前端之境]，每周都會努力原創一些前端技術干貨，關注公眾號后可以邀你加入前端技術交流群，我們可以一起互相交流，共同進步。
文章已同步更新至Github博客，若覺文章尚可，歡迎前往star！
你的一個點贊，值得讓我付出更多的努力！
逆境中成長，只有不斷地學習，才能成為更好的自己，與君共勉！
