React16源碼解讀：揭祕ReactDOM.render

時間  2020-01-19
標籤 react16 react 源碼 解讀 揭祕 reactdom.render reactdom render 欄目 React 简体版
原文   原文鏈接

引言

在上一篇文章中咱們經過create-react-app腳手架快速搭建了一個簡單的示例，並基於該示例講解了在類組件中React.Component和React.PureComponent背後的實現原理。同時咱們也瞭解到，經過使用Babel預置工具包@babel/preset-react能夠將類組件中render方法的返回值和函數定義組件中的返回值轉換成使用React.createElement方法包裝而成的多層嵌套結構，並基於源碼逐行分析了React.createElement方法背後的實現過程和ReactElement構造函數的成員結構，最後根據分析結果總結出了幾道面試中可能會碰到或者本身之前遇到過的面試考點。上篇文章中的內容相對而言仍是比較簡單基礎，主要是爲本文以及後續的任務調度相關內容打下基礎，幫助咱們更好地理解源碼的用意。本文就結合上篇文章的基礎內容，從組件渲染的入口點ReactDOM.render方法開始，一步一步深刻源碼，揭祕ReactDOM.render方法背後的實現原理，若有錯誤，還請指出。javascript

源碼中有不少判斷相似__DEV__變量的控制語句，用於區分開發環境和生產環境，筆者在閱讀源碼的過程當中不太關心這些內容，就直接略過了，有興趣的小夥伴兒能夠本身研究研究。css

render VS hydrate

本系列的源碼分析是基於Reactv16.10.2版本的，爲了保證源碼一致仍是建議你選擇相同的版本，下載該版本的地址和筆者選擇該版本的具體緣由能夠在上篇文章的準備階段小節中查看，這裏就不作過多講解了。項目示例自己也比較簡單，能夠按照準備階段的步驟自行使用create-react-app快速將一個簡單的示例搭建起來，而後咱們定位到src/index.js文件下，能夠看到以下代碼：html

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
...
ReactDOM.render(<App />, document.getElementById('root'));
...

該文件即爲項目的主入口文件，App組件即爲根組件，ReactDOM.render就是咱們要開始分析源碼的入口點。咱們經過如下路徑能夠找到ReactDOM對象的完整代碼：前端

packages -> react-dom -> src -> client -> ReactDOM.js

而後咱們將代碼定位到第632行，能夠看到ReactDOM對象包含了不少咱們可能使用過的方法，例如render、createPortal、findDOMNode，hydrate和unmountComponentAtNode等。本文中咱們暫且只關心render方法，但爲了方便對比，也能夠簡單看下hydrate方法：java

const ReactDOM: Object = {
  ...
  /**
   * 服務端渲染
   * @param element 表示一個ReactNode，能夠是一個ReactElement對象
   * @param container 須要將組件掛載到頁面中的DOM容器
   * @param callback 渲染完成後須要執行的回調函數
   */
  hydrate(element: React$Node, container: DOMContainer, callback: ?Function) {
    invariant(
      isValidContainer(container),
      'Target container is not a DOM element.',
    );
    ...
    // TODO: throw or warn if we couldn't hydrate?
    // 注意第一個參數爲null，第四個參數爲true
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      true,
      callback,
    );
  },

  /**
   * 客戶端渲染
   * @param element 表示一個ReactElement對象
   * @param container 須要將組件掛載到頁面中的DOM容器
   * @param callback 渲染完成後須要執行的回調函數
   */
  render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    invariant(
      isValidContainer(container),
      'Target container is not a DOM element.',
    );
    ...
    // 注意第一個參數爲null，第四個參數爲false
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  },
  ...
};

發現沒，render方法的第一個參數就是咱們在上篇文章中講過的ReactElement對象，因此說上篇文章的內容就是爲了在這裏打下基礎的，便於咱們對參數的理解。事實上，在源碼中幾乎全部方法參數中的element字段都可以傳入一個ReactElement實例，這個實例就是經過Babel編譯器在編譯過程當中使用React.createElement方法獲得的。接下來在render方法中調用legacyRenderSubtreeIntoContainer來正式進入渲染流程，不過這裏須要留意一下的是，render方法和hydrate方法在執行legacyRenderSubtreeIntoContainer時，第一個參數的值均爲null，第四個參數的值剛好相反。node

而後將代碼定位到第570行，進入legacyRenderSubtreeIntoContainer方法的具體實現：react

/**
 * 開始構建FiberRoot和RootFiber，以後開始執行更新任務
 * @param parentComponent 父組件，能夠把它當成null值來處理
 * @param children ReactDOM.render()或者ReactDOM.hydrate()中的第一個參數，能夠理解爲根組件
 * @param container ReactDOM.render()或者ReactDOM.hydrate()中的第二個參數，組件須要掛載的DOM容器
 * @param forceHydrate 表示是否融合，用於區分客戶端渲染和服務端渲染，render方法傳false，hydrate方法傳true
 * @param callback ReactDOM.render()或者ReactDOM.hydrate()中的第三個參數，組件渲染完成後須要執行的回調函數
 * @returns {*}
 */
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {
  ...
  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
  // member of intersection type." Whyyyyyy.
  // 在第一次執行的時候，container上是確定沒有_reactRootContainer屬性的
  // 因此第一次執行時，root確定爲undefined
  let root: _ReactSyncRoot = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // Initial mount
    // 首次掛載，進入當前流程控制中，container._reactRootContainer指向一個ReactSyncRoot實例
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    // root表示一個ReactSyncRoot實例，實例中有一個_internalRoot方法指向一個fiberRoot實例
    fiberRoot = root._internalRoot;
    // callback表示ReactDOM.render()或者ReactDOM.hydrate()中的第三個參數
    // 重寫callback，經過fiberRoot去找到其對應的rootFiber，而後將rootFiber的第一個child的stateNode做爲callback中的this指向
    // 通常狀況下咱們不多去寫第三個參數，因此能夠沒必要關心這裏的內容
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Initial mount should not be batched.
    // 對於首次掛載來講，更新操做不該該是批量的，因此會先執行unbatchedUpdates方法
    // 該方法中會將executionContext(執行上下文)切換成LegacyUnbatchedContext(非批量上下文)
    // 切換上下文以後再調用updateContainer執行更新操做
    // 執行完updateContainer以後再將executionContext恢復到以前的狀態
    unbatchedUpdates(() => {
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    // 不是首次掛載，即container._reactRootContainer上已經存在一個ReactSyncRoot實例
    fiberRoot = root._internalRoot;
    // 下面的控制語句和上面的邏輯保持一致
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Update
    // 對於非首次掛載來講，是不須要再調用unbatchedUpdates方法的
    // 即再也不須要將executionContext(執行上下文)切換成LegacyUnbatchedContext(非批量上下文)
    // 而是直接調用updateContainer執行更新操做
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  return getPublicRootInstance(fiberRoot);
}

上面代碼的內容稍微有些多，咋一看可能不太好理解，咱們暫且能夠不用着急看完整個函數內容。試想當咱們第一次啓動運行項目的時候，也就是第一次執行ReactDOM.render方法的時候，這時去獲取container._reactRootContainer確定是沒有值的，因此咱們先關心第一個if語句中的內容：git

if (!root) {
    // Initial mount
    // 首次掛載，進入當前流程控制中，container._reactRootContainer指向一個ReactSyncRoot實例
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    ...
}

這裏經過調用legacyCreateRootFromDOMContainer方法將其返回值賦值給container._reactRootContainer，咱們將代碼定位到同文件下的第517行，去看看legacyCreateRootFromDOMContainer的具體實現：github

/**
 * 建立並返回一個ReactSyncRoot實例
 * @param container ReactDOM.render()或者ReactDOM.hydrate()中的第二個參數，組件須要掛載的DOM容器
 * @param forceHydrate 是否須要強制融合，render方法傳false，hydrate方法傳true
 * @returns {ReactSyncRoot}
 */
function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean,
): _ReactSyncRoot {
  // 判斷是否須要融合
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // First clear any existing content.
  // 針對客戶端渲染的狀況，須要將container容器中的全部元素移除
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    // 循環遍歷每一個子節點進行刪除
    while ((rootSibling = container.lastChild)) {
      ...
      container.removeChild(rootSibling);
    }
  }
  ...
  // Legacy roots are not batched.
  // 返回一個ReactSyncRoot實例
  // 該實例具備一個_internalRoot屬性指向fiberRoot
  return new ReactSyncRoot(
    container,
    LegacyRoot,
    shouldHydrate
      ? {
          hydrate: true,
        }
      : undefined,
  );
}

/**
 * 根據nodeType和attribute判斷是否須要融合
 * @param container DOM容器
 * @returns {boolean}
 */
function shouldHydrateDueToLegacyHeuristic(container) {
  const rootElement = getReactRootElementInContainer(container);
  return !!(
    rootElement &&
    rootElement.nodeType === ELEMENT_NODE &&
    rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
  );
}

/**
 * 根據container來獲取DOM容器中的第一個子節點
 * @param container DOM容器
 * @returns {*}
 */
function getReactRootElementInContainer(container: any) {
  if (!container) {
    return null;
  }

  if (container.nodeType === DOCUMENT_NODE) {
    return container.documentElement;
  } else {
    return container.firstChild;
  }
}

其中在shouldHydrateDueToLegacyHeuristic方法中，首先根據container來獲取DOM容器中的第一個子節點，獲取該子節點的目的在於經過節點的nodeType和是否具備ROOT_ATTRIBUTE_NAME屬性來區分是客戶端渲染仍是服務端渲染，ROOT_ATTRIBUTE_NAME位於packages/react-dom/src/shared/DOMProperty.js文件中，表示data-reactroot屬性。咱們知道，在服務端渲染中有別於客戶端渲染的是，node服務會在後臺先根據匹配到的路由生成完整的HTML字符串，而後再將HTML字符串發送到瀏覽器端，最終生成的HTML結構簡化後以下：面試

<body>
    <div id="root">
        <div data-reactroot=""></div>
    </div>
</body>

在客戶端渲染中是沒有data-reactroot屬性的，所以就能夠區分出客戶端渲染和服務端渲染。在React中的nodeType主要包含了五種，其對應的值和W3C中的nodeType標準是保持一致的，位於與DOMProperty.js同級的HTMLNodeType.js文件中：

// 表明元素節點
export const ELEMENT_NODE = 1;
// 表明文本節點
export const TEXT_NODE = 3;
// 表明註釋節點
export const COMMENT_NODE = 8;
// 表明整個文檔，即document
export const DOCUMENT_NODE = 9;
// 表明文檔片斷節點
export const DOCUMENT_FRAGMENT_NODE = 11;

通過以上分析，如今咱們就能夠很容易地區分出客戶端渲染和服務端渲染，而且在面試中若是被問到兩種渲染模式的區別，咱們就能夠很輕鬆地在源碼級別上說出二者的實現差別，讓面試官眼前一亮。怎麼樣，到目前爲止，其實仍是以爲挺簡單的吧？

FiberRoot VS RootFiber

在這一小節中，咱們將嘗試去理解兩個比較容易混淆的概念：FiberRoot和RootFiber。這兩個概念在React的整個任務調度過程當中起着關鍵性的做用，若是不理解這兩個概念，後續的任務調度過程就是空談，因此這裏也是咱們必需要去理解的部分。接下來接着上一小節的內容，繼續分析legacyCreateRootFromDOMContainer方法中的剩餘內容，在函數體的結尾返回了一個ReactSyncRoot實例，咱們從新回到ReactDOM.js文件能夠很容易找到ReactSyncRoot構造函數的具體內容：

/**
 * ReactSyncRoot構造函數
 * @param container DOM容器
 * @param tag fiberRoot節點的標記(LegacyRoot、BatchedRoot、ConcurrentRoot)
 * @param options 配置信息，只有在hydrate時纔有值，不然爲undefined
 * @constructor
 */
function ReactSyncRoot(
  container: DOMContainer,
  tag: RootTag,
  options: void | RootOptions,
) {
  this._internalRoot = createRootImpl(container, tag, options);
}

/**
 * 建立並返回一個fiberRoot
 * @param container DOM容器
 * @param tag fiberRoot節點的標記(LegacyRoot、BatchedRoot、ConcurrentRoot)
 * @param options 配置信息，只有在hydrate時纔有值，不然爲undefined
 * @returns {*}
 */
function createRootImpl(
  container: DOMContainer,
  tag: RootTag,
  options: void | RootOptions,
) {
  // Tag is either LegacyRoot or Concurrent Root
  // 判斷是不是hydrate模式
  const hydrate = options != null && options.hydrate === true;
  const hydrationCallbacks =
    (options != null && options.hydrationOptions) || null;
  
  // 建立一個fiberRoot
  const root = createContainer(container, tag, hydrate, hydrationCallbacks);
  // 給container附加一個內部屬性用於指向fiberRoot的current屬性對應的rootFiber節點
  markContainerAsRoot(root.current, container);
  if (hydrate && tag !== LegacyRoot) {
    const doc =
      container.nodeType === DOCUMENT_NODE
        ? container
        : container.ownerDocument;
    eagerlyTrapReplayableEvents(doc);
  }
  return root;
}

從上述源碼中，咱們能夠看到createRootImpl方法經過調用createContainer方法來建立一個fiberRoot實例，並將該實例返回並賦值到ReactSyncRoot構造函數的內部成員_internalRoot屬性上。咱們繼續深刻createContainer方法去探究一下fiberRoot完整的建立過程，該方法被抽取到與react-dom包同級的另外一個相關的依賴包react-reconciler包中，而後定位到react-reconciler/src/ReactFiberReconciler.js的第299行：

/**
 * 內部調用createFiberRoot方法返回一個fiberRoot實例
 * @param containerInfo DOM容器
 * @param tag fiberRoot節點的標記(LegacyRoot、BatchedRoot、ConcurrentRoot)
 * @param hydrate 判斷是不是hydrate模式
 * @param hydrationCallbacks 只有在hydrate模式時纔可能有值，該對象包含兩個可選的方法：onHydrated和onDeleted
 * @returns {FiberRoot}
 */
export function createContainer(
  containerInfo: Container,
  tag: RootTag,
  hydrate: boolean,
  hydrationCallbacks: null | SuspenseHydrationCallbacks,
): OpaqueRoot {
  return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);
}

/**
 * 建立fiberRoot和rootFiber並相互引用
 * @param containerInfo DOM容器
 * @param tag fiberRoot節點的標記(LegacyRoot、BatchedRoot、ConcurrentRoot)
 * @param hydrate 判斷是不是hydrate模式
 * @param hydrationCallbacks 只有在hydrate模式時纔可能有值，該對象包含兩個可選的方法：onHydrated和onDeleted
 * @returns {FiberRoot}
 */
export function createFiberRoot(
  containerInfo: any,
  tag: RootTag,
  hydrate: boolean,
  hydrationCallbacks: null | SuspenseHydrationCallbacks,
): FiberRoot {
  // 經過FiberRootNode構造函數建立一個fiberRoot實例
  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
  if (enableSuspenseCallback) {
    root.hydrationCallbacks = hydrationCallbacks;
  }

  // Cyclic construction. This cheats the type system right now because
  // stateNode is any.
  // 經過createHostRootFiber方法建立fiber tree的根節點，即rootFiber
  // 須要留意的是，fiber節點也會像DOM樹結構同樣造成一個fiber tree單鏈表樹結構
  // 每一個DOM節點或者組件都會生成一個與之對應的fiber節點(生成的過程會在後續的文章中進行解讀)
  // 在後續的調和(reconciliation)階段起着相當重要的做用
  const uninitializedFiber = createHostRootFiber(tag);
  // 建立完rootFiber以後，會將fiberRoot實例的current屬性指向剛建立的rootFiber
  root.current = uninitializedFiber;
  // 同時rootFiber的stateNode屬性會指向fiberRoot實例，造成相互引用
  uninitializedFiber.stateNode = root;
  // 最後將建立的fiberRoot實例返回
  return root;
}

一個完整的FiberRootNode實例包含了不少有用的屬性，這些屬性在任務調度階段都發揮着各自的做用，能夠在ReactFiberRoot.js文件中看到完整的FiberRootNode構造函數的實現(這裏只列舉部分屬性)：

/**
 *  FiberRootNode構造函數
 * @param containerInfo DOM容器
 * @param tag fiberRoot節點的標記(LegacyRoot、BatchedRoot、ConcurrentRoot)
 * @param hydrate 判斷是不是hydrate模式
 * @constructor
 */
function FiberRootNode(containerInfo, tag, hydrate) {
  // 用於標記fiberRoot的類型
  this.tag = tag;
  // 指向當前激活的與之對應的rootFiber節點
  this.current = null;
  // 和fiberRoot關聯的DOM容器的相關信息
  this.containerInfo = containerInfo;
  ...
  // 當前的fiberRoot是否處於hydrate模式
  this.hydrate = hydrate;
  ...
  // 每一個fiberRoot實例上都只會維護一個任務，該任務保存在callbackNode屬性中
  this.callbackNode = null;
  // 當前任務的優先級
  this.callbackPriority = NoPriority;
  ...
}

部分屬性信息如上所示，因爲屬性過多而且在本文中暫時還用不到，這裏就先不一一列舉出來了，剩餘的屬性及其註釋信息已經上傳至Github，感興趣的朋友能夠自行查看。在瞭解完了fiberRoot的屬性結構以後，接下來繼續探究createFiberRoot方法的後半部份內容：

// 如下代碼來自上文中的createFiberRoot方法
// 經過createHostRootFiber方法建立fiber tree的根節點，即rootFiber
const uninitializedFiber = createHostRootFiber(tag);
// 建立完rootFiber以後，會將fiberRoot實例的current屬性指向剛建立的rootFiber
root.current = uninitializedFiber;
// 同時rootFiber的stateNode屬性會指向fiberRoot實例，造成相互引用
uninitializedFiber.stateNode = root;

// 如下代碼來自ReactFiber.js文件
/**
 * 內部調用createFiber方法建立一個FiberNode實例
 * @param tag fiberRoot節點的標記(LegacyRoot、BatchedRoot、ConcurrentRoot)
 * @returns {Fiber}
 */
export function createHostRootFiber(tag: RootTag): Fiber {
  let mode;
  // 如下代碼根據fiberRoot的標記類型來動態設置rootFiber的mode屬性
  // export const NoMode = 0b0000;          => 0
  // export const StrictMode = 0b0001;      => 1
  // export const BatchedMode = 0b0010;     => 2
  // export const ConcurrentMode = 0b0100;  => 4
  // export const ProfileMode = 0b1000;     => 8
  if (tag === ConcurrentRoot) {
    mode = ConcurrentMode | BatchedMode | StrictMode;
  } else if (tag === BatchedRoot) {
    mode = BatchedMode | StrictMode;
  } else {
    mode = NoMode;
  }
  ...

  // 調用createFiber方法建立並返回一個FiberNode實例
  // HostRoot表示fiber tree的根節點
  // 其餘標記類型能夠在shared/ReactWorkTags.js文件中找到
  return createFiber(HostRoot, null, null, mode);
}

/**
 * 建立並返回一個FiberNode實例
 * @param tag 用於標記fiber節點的類型(全部的類型存放在shared/ReactWorkTags.js文件中)
 * @param pendingProps 表示待處理的props數據
 * @param key 用於惟一標識一個fiber節點(特別在一些列表數據結構中，通常會要求爲每一個DOM節點或組件加上額外的key屬性，在後續的調和階段會派上用場)
 * @param mode 表示fiber節點的模式
 * @returns {FiberNode}
 */
const createFiber = function(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
): Fiber {
  // $FlowFixMe: the shapes are exact here but Flow doesn't like constructors
  // FiberNode構造函數用於建立一個FiberNode實例，即一個fiber節點
  return new FiberNode(tag, pendingProps, key, mode);
};

至此咱們就成功地建立了一個fiber節點，上文中咱們提到過，和DOM樹結構相似，fiber節點也會造成一個與DOM樹結構對應的fiber tree，而且是基於單鏈表的樹結構，咱們在上面剛建立的fiber節點可做爲整個fiber tree的根節點，即RootFiber節點。在目前階段，咱們暫時不用關心一個fiber節點所包含的全部屬性，但能夠稍微留意一下如下相關屬性：

/**
 * FiberNode構造函數
 * @param tag 用於標記fiber節點的類型
 * @param pendingProps 表示待處理的props數據
 * @param key 用於惟一標識一個fiber節點(特別在一些列表數據結構中，通常會要求爲每一個DOM節點或組件加上額外的key屬性，在後續的調和階段會派上用場)
 * @param mode 表示fiber節點的模式
 * @constructor
 */
function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Instance
  // 用於標記fiber節點的類型
  this.tag = tag;
  // 用於惟一標識一個fiber節點
  this.key = key;
  ...
  // 對於rootFiber節點而言，stateNode屬性指向對應的fiberRoot節點
  // 對於child fiber節點而言，stateNode屬性指向對應的組件實例
  this.stateNode = null;

  // Fiber
  // 如下屬性建立單鏈表樹結構
  // return屬性始終指向父節點
  // child屬性始終指向第一個子節點
  // sibling屬性始終指向第一個兄弟節點
  this.return = null;
  this.child = null;
  this.sibling = null;
  // index屬性表示當前fiber節點的索引
  this.index = 0;
  ...

  // 表示待處理的props數據
  this.pendingProps = pendingProps;
  // 表示以前已經存儲的props數據
  this.memoizedProps = null;
  // 表示更新隊列
  // 例如在常見的setState操做中
  // 其實會先將須要更新的數據存放到這裏的updateQueue隊列中用於後續調度
  this.updateQueue = null;
  // 表示以前已經存儲的state數據
  this.memoizedState = null;
  ...

  // 表示fiber節點的模式
  this.mode = mode;

  // 表示當前更新任務的過時時間，即在該時間以後更新任務將會被完成
  this.expirationTime = NoWork;
  // 表示當前fiber節點的子fiber節點中具備最高優先級的任務的過時時間
  // 該屬性的值會根據子fiber節點中的任務優先級進行動態調整
  this.childExpirationTime = NoWork;

  // 用於指向另外一個fiber節點
  // 這兩個fiber節點使用alternate屬性相互引用，造成雙緩衝
  // alternate屬性指向的fiber節點在任務調度中又稱爲workInProgress節點
  this.alternate = null;
  ...
}

其餘有用的屬性筆者已經在源碼中寫好相關注釋，感興趣的朋友能夠在Github上查看完整的註釋信息幫助理解。固然在現階段，其中的一些屬性還暫時難以理解，不過沒有關係，在後續的內容和系列文章中將會逐個擊破。在本小節中咱們主要是爲了理解FiberRoot和RootFiber這兩個容易混淆的概念以及二者之間的聯繫。同時在這裏咱們須要特別注意的是，多個fiber節點可造成基於單鏈表的樹形結構，經過自身的return，child和sibling屬性能夠在多個fiber節點之間創建聯繫。爲了更加容易理解多個fiber節點及其屬性之間的關係，這裏先回顧一下在上一篇文章中的簡單示例，咱們在src/App.js文件中將create-react-app腳手架生成的默認根組件App修改成以下形式：

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>
        );
    }
}

最終生成的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>

基於該DOM結構再結合上文中對源碼的分析過程，最後咱們能夠嘗試得出一張關係圖來加深印象：

總結

本文主要是在上一篇文章內容的基礎之上從零開始逐行分析ReactDOM.render方法的實現原理，其背後的實現過程和調用棧仍是很是複雜的，本身也是處於不斷的摸索過程當中。在本文中主要是介紹兩個核心概念：FiberRoot和RootFiber，只有理解並區分這兩個概念以後才能更好地理解React的Fiber架構和任務調度階段中任務的執行過程。閱讀源碼的過程是痛苦的，但與此同時本身所得到的收益也是巨大的，爲了不文章過於枯燥，仍是打算將源碼內容劃分到系列文章中來單獨解讀，期間的間隔時間可用於對以前內容進行回顧，避免一口吃個胖子反而效果很差。

感謝閱讀

若是你以爲這篇文章的內容對你有幫助，可否幫個忙關注一下筆者的公衆號[前端之境]，每週都會努力原創一些前端技術乾貨，關注公衆號後能夠邀你加入前端技術交流羣，咱們能夠一塊兒互相交流，共同進步。

文章已同步更新至Github博客，若覺文章尚可，歡迎前往star！

你的一個點贊，值得讓我付出更多的努力！

逆境中成長，只有不斷地學習，才能成爲更好的本身，與君共勉！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程