React16源碼解讀：揭秘ReactDOM.render

来源:https://www.cnblogs.com/tangshiwei/archive/2020/01/18/12209461.html
-Advertisement-
Play Games

引言 在 "上一篇文章" 中我們通過 腳手架快速搭建了一個簡單的示例，並基於該示例講解了在類組件中 和`React.PureComponent @babel/preset react render React.createElement React.createElement ReactElemen ...


引言

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

源碼中有很多判斷類似__DEV__變數的控制語句，用於區分開發環境和生產環境，筆者在閱讀源碼的過程中不太關心這些內容，就直接略過了，有興趣的小伙伴兒可以自己研究研究。

render VS hydrate

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

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方法：

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，第四個參數的值恰好相反。

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

/**
 * 開始構建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語句中的內容：

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

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

/**
 * 創建並返回一個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！

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

逆境中成長，只有不斷地學習，才能成為更好的自己，與君共勉！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 探究Redis兩種持久化方式下的數據恢復
    對長期奮戰在一線的後端開發人員來說，都知道redis有兩種持久化方式RDB和AOF，雖說大家都知道這兩種方式大概運作方式，但想必有實操瞭解得不會太多。 這裡是自己實操兩種持久化方式的一點點記錄。 先看以下摘錄自redis官網原文解釋(當然原文是English，這裡用google翻譯過了。) Redi ...
  • hadoop學習摘要
    參考鏈接：https://www.zhihu.com/question/333417513 https://www.oschina.net/p/hbase hadoop環境搭建：https://blog.csdn.net/hliq5399/article/details/78193113/ goog ...
  • Elasticsearch必知必會的乾貨知識一：ES索引文檔的CRUD
    ​ 若在傳統DBMS 關係型資料庫中查詢海量數據，特別是模糊查詢，一般我們都是使用like %查詢的值%，但這樣會導致無法應用索引，從而形成全表掃描效率低下，即使是在有索引的欄位精確值查找，面對海量數據，效率也是相對較低的，所以目前一般的互聯網公司或大型公司，若要查詢海量數據，最好的辦法就是使用搜索 ...
  • HTML連載64-a標簽偽類選擇器的註意點與練習
    一、a標簽的偽類選擇器註意點 （1）a標簽的偽類選擇器可以單獨出現，也可以一起出現。也就是可以設置多個狀態的樣式。 （2） a標簽的偽類選擇器如果一起出現，那麼有嚴格的順序要求，編寫的順序必須要遵守原則： （love\hate原則，即link\visited\hover\active）預設狀態、被訪 ...
  • vue koa2 mongodb 從零開始做個人博客(二) 登錄註冊功能後端部分
    博客項目登錄註冊功能後端，涉及到mongodb,redis,vuex,nuxt.js,mongoose,koa-redis,smtp使用的基本操作 ...
  • 一起學Vue之事件處理
    在Vue進行前端開發中，事件監聽是必不可少的功能，本文通過簡單的小例子，簡述v-on的簡單用法，僅供學習分享使用，如有不足之處，還請指正。 ...
  • react-native-----hello word！
    react native運行helloword 今天是個特殊的時刻，我前天開始學習react native，一直環境塔建出錯，運行打包出錯，今晚，我終於把這個難搞的環境給搭建好了，併成功運行了第一個helloword！！ 這個環境：python2+java jdk+Android 我全部是照著官網弄 ...
  • vue基礎中的註意事項，以及一些學習心得
    分享一些基礎小白們可能不知道的東西、以及一些基礎的知識的註意事項 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類