React源碼解析之ReactDOM.render()

iKcamp 發(fā)布于2019-08-26 10:45 / 2982人閱讀

摘要：一更新的方式有三種渲染接下來，我們就來看下源碼二作用在提供的里渲染一個元素，并返回對該組件的引用常見的用法是這個官網(wǎng)網(wǎng)址源碼服務(wù)端使用方法渲染節(jié)點是讓服務(wù)端盡可能復(fù)用節(jié)點，提高性能元素容器應(yīng)用渲染結(jié)束后，調(diào)用的函數(shù)錯誤抓取方法本質(zhì)是返回

一、React更新的方式有三種：
（1）ReactDOM.render() || hydrate（ReactDOMServer渲染）
（2）setState
（3）forceUpdate

接下來，我們就來看下ReactDOM.render()源碼

二、ReactDOM.render(element, container[, callback])

作用：
在提供的container里渲染一個React元素，并返回對該組件的引用

常見的用法是這個：

ReactDOM.render(, document.getElementById("root"));

官網(wǎng)網(wǎng)址：
https://zh-hans.reactjs.org/docs/react-dom.html#render

源碼：

const ReactDOM: Object = {
  //服務(wù)端使用hydrate方法渲染節(jié)點
  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?
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      //true是讓服務(wù)端盡可能復(fù)用節(jié)點，提高性能
      true,
      callback,
    );
  },

  render(
    //元素
    element: React$Element,
    //容器
    container: DOMContainer,
    //應(yīng)用渲染結(jié)束后，調(diào)用的函數(shù)
    callback: ?Function,
  ) {
    //錯誤抓取
    invariant(
      isValidContainer(container),
      "Target container is not a DOM element.",
    );

    //render方法本質(zhì)是返回了函數(shù)legacyRenderSubtreeIntoContainer
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      //render不會復(fù)用節(jié)點，因為是前端渲染
      false,
      callback,
    );
  },

}

解析：
（1）render()方法本質(zhì)是返回了函數(shù)legacyRenderSubtreeIntoContainer()

（2）hydrate()和render()的唯一區(qū)別是傳入legacyRenderSubtreeIntoContainer()的第四個參數(shù)不一樣：
hydrate()為true，表示在服務(wù)端盡可能復(fù)用節(jié)點，提高性能;
render()為false，表示在瀏覽器端不會去復(fù)用節(jié)點，而是全部替換掉。

三、legacyRenderSubtreeIntoContainer()

作用：
初始化Container

源碼：

// null, element, container, false, callback,
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component,
  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.

  //render中一般渲染的是DOM標簽，所以不會有_reactRootContainer存在，
  // 所以第一次渲染，root是不存在的
  let root: _ReactSyncRoot = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // Initial mount
    //創(chuàng)建一個ReactRooter
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    fiberRoot = root._internalRoot;

    //判斷是否有callback
    if (typeof callback === "function") {
      const originalCallback = callback;
      callback = function() {
        //根據(jù)fiberRoot獲取公共Root實例
        //就是fiberRoot.current.child.stateNode
        const instance = getPublicRootInstance(fiberRoot);
        //通過該實例instance 去調(diào)用originalCallback方法
        originalCallback.call(instance);
      };
    }
    // Initial mount should not be batched.
    //初始化安裝不應(yīng)該批量更新
    unbatchedUpdates(() => {
      //element,fiberRoot,null,callback
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    fiberRoot = root._internalRoot;
    if (typeof callback === "function") {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Update
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  return getPublicRootInstance(fiberRoot);
}

解析：
（1）由于是第一次渲染更新，所以root是null，只需看!root的情況

（2）legacyCreateRootFromDOMContainer(container,false,)的作用是創(chuàng)建ReactRooter，稍后會講解

（3）unbatchedUpdates(fn)的簡化源碼如下：

unbatchedUpdates(fn){
  return fn()
}

（4）updateContainer()的作用是更新container，稍后講解

四、legacyCreateRootFromDOMContainer(container,forceHydrate,)

作用：
創(chuàng)建一個ReactRooter

源碼：

//創(chuàng)建ReactRooter
function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean,
): _ReactSyncRoot {
  //是否是服務(wù)端渲染
  const shouldHydrate =
    //render的forceHydrate是false，所以會調(diào)用shouldHydrateDueToLegacyHeuristic方法來判斷是否是服務(wù)端渲染
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // First clear any existing content.
  //如果不是服務(wù)端渲染的話
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    //循環(huán)刪除container的子節(jié)點
    //為什么要刪除？因為React認為這些節(jié)點是不需要復(fù)用的
    while ((rootSibling = container.lastChild)) {
 
      container.removeChild(rootSibling);
    }
  }

  // Legacy roots are not batched.
  //container是空的container,0,false
  //ReactRoot是同步的
  //sync 同步
  //async 異步
  return new ReactSyncRoot(container, LegacyRoot, shouldHydrate);
}

解析：
（1）render()的forceHydrate是false，所以看shouldHydrateDueToLegacyHeuristic(container)是否返回false

① shouldHydrateDueToLegacyHeuristic()

作用：
判斷是否是服務(wù)端渲染

源碼：

//判斷是否是服務(wù)端渲染
function shouldHydrateDueToLegacyHeuristic(container) {
  //獲取container的第一個節(jié)點（根節(jié)點）
  //也就是 id="root" 的節(jié)點
  const rootElement = getReactRootElementInContainer(container);
  return !!(
    rootElement &&
    rootElement.nodeType === ELEMENT_NODE &&
    //判斷是否是服務(wù)端渲染
    rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
  );
}

② getReactRootElementInContainer()

作用：
獲取container中的第一個節(jié)點（或文檔節(jié)點）

源碼：

//獲取Container里的RectRoot元素
//返回document節(jié)點或第一個子節(jié)點
function getReactRootElementInContainer(container: any) {
  if (!container) {
    return null;
  }
  //DOCUMENT_NODE 即 window.document
  if (container.nodeType === DOCUMENT_NODE) {
    return container.documentElement;
  } else {
    return container.firstChild;
  }
}

也就是說，判斷是否是服務(wù)端渲染的標志是：
在獲取container中的第一個節(jié)點（或文檔節(jié)點）后，看該節(jié)點是否有屬性ROOT_ATTRIBUTE_NAME

ROOT_ATTRIBUTE_NAME是什么呢？

//服務(wù)端渲染的話，會在React App的第一個元素上添加該屬性
//以標識是服務(wù)端渲染的
export const ROOT_ATTRIBUTE_NAME = "data-reactroot";

即data-reactroot

（2）由（1）可知，render()的container的首節(jié)點是沒有data-reactroot屬性的，所以會進行while循環(huán)，依次刪除container的子節(jié)點，刪除完畢后，new 一個ReactSyncRoot()的實例

（3）ReactSyncRoot()

作用：
創(chuàng)建ReactRoot實例

源碼：

// container,0,false
function ReactSyncRoot(
  container: DOMContainer,
  tag: RootTag,
  hydrate: boolean,
) {
  // Tag is either LegacyRoot or Concurrent Root
  const root = createContainer(container, tag, hydrate);
  this._internalRoot = root;
}

把創(chuàng)建的root作為legacyCreateRootFromDOMContainer()的__internalRoot屬性

① createContainer

作用：
創(chuàng)建React容器

源碼：

//創(chuàng)建React容器
export function createContainer(
  containerInfo: Container,
  tag: RootTag,
  hydrate: boolean,
): OpaqueRoot {
  //創(chuàng)建FiberRoot
  return createFiberRoot(containerInfo, tag, hydrate);
}

也就是說legacyCreateRootFromDOMContainer()的本質(zhì)是創(chuàng)建了FilberRoot

五、updateContainer()

作用：
創(chuàng)建更新container

源碼：

//更新Container
export function updateContainer(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component,
  callback: ?Function,
): ExpirationTime {
  const current = container.current;
  //1073741823
  const currentTime = requestCurrentTime();

  const suspenseConfig = requestCurrentSuspenseConfig();
  //計算過期時間，這是React優(yōu)先級更新非常重要的點
  const expirationTime = computeExpirationForFiber(
    currentTime,
    current,
    suspenseConfig,
  );
  return updateContainerAtExpirationTime(
    element,
    container,
    parentComponent,
    expirationTime,
    suspenseConfig,
    callback,
  );
}

解析：

（1）requestCurrentTime()

作用：
計算新開始的時間

源碼不用看，只需要知道該時間，是以V8引擎上最大31位整數(shù)1073741823為根據(jù)的：

// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
// Math.pow(2, 30) - 1
// 0b111111111111111111111111111111
//整型最大數(shù)值，是V8中針對32位系統(tǒng)所設(shè)置的最大值
export default 1073741823;

（2）requestCurrentSuspenseConfig()和computeExpirationForFiber()以后會講解

（3）updateContainerAtExpirationTime()

作用：
每到過期時間，就更新container，過期時間單位為 10ms

源碼：

//在過期時間內(nèi)，更新container
export function updateContainerAtExpirationTime(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component,
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  callback: ?Function,
) {
  // TODO: If this is a nested container, this won"t be the root.
  const current = container.current;

  //由于parentComponent為null,所以返回空對象{}
  const context = getContextForSubtree(parentComponent);
  if (container.context === null) {
    container.context = context;
  } else {
    container.pendingContext = context;
  }
  //計劃更新Root
  return scheduleRootUpdate(
    current,
    element,
    expirationTime,
    suspenseConfig,
    callback,
  );
}

解析：

① scheduleRootUpdate()

作用：
計劃更新Root

源碼：

//計劃更新Root
function scheduleRootUpdate(
  current: Fiber,
  element: ReactNodeList,
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  callback: ?Function,
) {

  //創(chuàng)建更新的時間節(jié)點
  const update = createUpdate(expirationTime, suspenseConfig);
  // Caution: React DevTools currently depends on this property
  // being called "element".
  update.payload = {element};

  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    warningWithoutStack(
      typeof callback === "function",
      "render(...): Expected the last optional `callback` argument to be a " +
        "function. Instead received: %s.",
      callback,
    );
    update.callback = callback;
  }

  if (revertPassiveEffectsChange) {
    flushPassiveEffects();
  }
  //一整個React應(yīng)用中，會有多次更新，而這多次更新均在更新隊列中
  enqueueUpdate(current, update);
  //進行任務(wù)調(diào)度
  //當React進行Update后，就要進行調(diào)度
  //即 根據(jù)任務(wù)的優(yōu)先級去調(diào)度任務(wù)
  //先執(zhí)行優(yōu)先級高的任務(wù)，
  scheduleWork(current, expirationTime);

  return expirationTime;
}

解析：
任務(wù)調(diào)度是React中最重要、復(fù)雜的內(nèi)容，之后會慢慢來解析。
這里可以看到，React將初始化的Update放入了更新隊列中，并進行任務(wù)調(diào)度，最終返回了一個expirationTime

也就是說，updateContainer()本質(zhì)是返回了expirationTime

六、getPublicRootInstance()

作用：
獲取root實例

源碼：

//獲取root實例
export function getPublicRootInstance(
  container: OpaqueRoot,
): React$Component | PublicInstance | null {
  //看到container.current，我就想到了ref（xxx.current）
  //獲取當前節(jié)點
  const containerFiber = container.current;
  if (!containerFiber.child) {
    return null;
  }
  switch (containerFiber.child.tag) {
    case HostComponent:
      return getPublicInstance(containerFiber.child.stateNode);
    default:
      return containerFiber.child.stateNode;
  }
}

解析：
由于是 React 初始化，所以container.current是沒有子節(jié)點的，所以該方法返回 null

七、ReactDOM.render()流程圖

總結(jié)：
ReactDOM.render() 的更新步驟
（1）創(chuàng)建 ReactRoot，ReactRoot 是創(chuàng)建整個React應(yīng)用的根對象

（2）創(chuàng)建 FiberRoot 和 RootFiber

（3）創(chuàng)建更新（創(chuàng)建更新后，就會進入調(diào)度階段，調(diào)度階段由調(diào)度器進行管理）

GitHub：
https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react-dom/src/client/ReactDOM.js

（完）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/106728.html

發(fā)表評論

登陸后可評論

0條評論

iKcamp

男|高級講師

我要關(guān)注我要私信

TA的文章

在tensorflow

閱讀 1070·2023-04-26 02:49
NGINX_ I/O 模型

閱讀 1242·2021-11-25 09:43
ASEMI超快恢復(fù)二極管MUR2060AC在高頻設(shè)備中的應(yīng)用

閱讀 2626·2021-11-18 10:02
virtono：新增美國洛杉磯/紐約/西班牙馬德里/法國巴黎/瑞典機房，1核/512M內(nèi)存/15G

閱讀 2987·2021-10-18 13:32
Vue學(xué)習(xí)日記（三）——Vue路由管理vue-router

閱讀 1336·2019-08-30 13:54
前端面試知識點集錦

閱讀 2146·2019-08-30 12:58
個人常用的軟件-前端

閱讀 3078·2019-08-29 14:06
瀏覽器 CSS Hack 收集

閱讀 2220·2019-08-28 18:10

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React源碼解析之ReactDOM.render()

相關(guān)文章

ReactDOM.render源碼解析-1

react解析: render的FiberRoot(三)

React源碼解析ReactDOM.render源碼

React系列之一起認識Render Prop

React造輪系列：對話框組件 - Dialog 思路

發(fā)表評論

0條評論

iKcamp

男|高級講師

TA的文章

在tensorflow

NGINX_ I/O 模型

ASEMI超快恢復(fù)二極管MUR2060AC在高頻設(shè)備中的應(yīng)用

virtono：新增美國洛杉磯/紐約/西班牙馬德里/法國巴黎/瑞典機房，1核/512M內(nèi)存/15G

Vue學(xué)習(xí)日記（三）——Vue路由管理vue-router

前端面試知識點集錦

個人常用的軟件-前端

瀏覽器 CSS Hack 收集

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React源碼解析之ReactDOM.render()

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！