React16原始碼解讀：開篇帶你搞懂幾個面試考點-有解無憂

引言

如今，主流的前端框架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 [email protected] [email protected]

// 運行專案
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=https://www.cnblogs.com/tangshiwei/p/{this.state.data} />

來將組件掛載到DOM容器中，最終得到App組件的DOM結構如下所示：

因此我們分析React原始碼的入口也將會是從ReactDOM.render方法開始一步一步分析組件渲染的整個流程，但是在此之前，我們有必要先了解幾個重要的前置知識點，這幾個知識點將會更好地幫助我們理解原始碼的函式呼叫堆疊中的引數意義和其他的一些細節，

2、前置知識

首先我們需要明確的是，在上述示例中，App組件的render方法回傳的是一段HTML結構，在普通的函式中這種寫法是不支持的，所以我們一般需要相應的插件來在背后支撐，在React中為了支持這種jsx語法提供了一個Babel預置工具包@babel/preset-react，其中這個preset又包含了兩個比較核心的插件：

// .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=https://www.cnblogs.com/tangshiwei/p/{this.state.data} />

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,

/** * 該方法接收包括但不限于三個引數，與上述示例中的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, ); }

/** * 為一個工廠函式，每次執行都會創建并回傳一個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; };

/** * 建構式，用于創建一個類組件的實體 * @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'); };

// 通過借用建構式，實作典型的寄生組合式繼承，避免原型污染 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;

React16原始碼解讀：開篇帶你搞懂幾個面試考點

引言

1、準備階段

2、前置知識

2.1 createElement & ReactElement

2.2 Component & PureComponent

3、面試考點

4、總結

5、交流