ReactDom.render指的是什么

這篇文章給大家分享的是有關(guān)ReactDom.render指的是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

步驟

1.創(chuàng)建ReactRoot

2.創(chuàng)建FiberRoot和FiberRoot

3.創(chuàng)建更新

render方法：

render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    invariant(
      isValidContainer(container),
      'Target container is not a DOM element.',
    );
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  },

render方法可以傳入三個(gè)參數(shù)包括ReactElement、DOM的包裹節(jié)點(diǎn)，和渲染結(jié)束后執(zhí)行的回調(diào)方法。
然后驗(yàn)證invariant驗(yàn)證container是否是有效的Dom節(jié)點(diǎn)。
最后返回legacyRenderSubtreeIntoContainer方法執(zhí)行后的結(jié)果，再來看看這個(gè)方法的參數(shù)

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
)

這里傳入五個(gè)參數(shù)，第一個(gè)是parentComponent不存在傳入null，第二個(gè)是傳入container的子元素，第三個(gè)是創(chuàng)建ReactRoot的包裹元素，第四個(gè)是協(xié)調(diào)更新的選項(xiàng)，第五個(gè)是渲染后的回調(diào)方法。

let root: Root = (container._reactRootContainer: any);
  if (!root) {
    // Initial mount
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );

先檢驗(yàn)ReactRoot是否存在不存在則執(zhí)行傳入container，
forceHydrate后的legacyCreateRootFromDOMContainer函數(shù)創(chuàng)建一個(gè)ReactRoot。forceHydrate在render方法中傳入的false，在Hydrate方法中傳入的true，主要是為了區(qū)分服務(wù)端渲染和客戶端渲染，true時(shí)未復(fù)用原來的節(jié)點(diǎn)適合服務(wù)端渲染，
如果是false則執(zhí)行container.removeChild(rootSibling)刪除所有的子節(jié)點(diǎn)。
然后返回通過 new ReactRoot(container, isConcurrent, shouldHydrate)：

function ReactRoot(
  container: DOMContainer,
  isConcurrent: boolean,
  hydrate: boolean,
) {
  const root = createContainer(container, isConcurrent, hydrate);
  this._internalRoot = root;
}

在這個(gè)方法中調(diào)用createContainer創(chuàng)建root，這個(gè)方法從react-reconciler/inline.dom文件中引入：

export function createContainer(
  containerInfo: Container,
  isConcurrent: boolean,
  hydrate: boolean,
): OpaqueRoot {
  return createFiberRoot(containerInfo, isConcurrent, hydrate);
}

在這個(gè)方法中又調(diào)用了createFiberRoot方法創(chuàng)建FiberRoot
在創(chuàng)建玩root后執(zhí)行unbatchedUpdates更新，傳入root。render方法更新：

unbatchedUpdates(() => {
      if (parentComponent != null) {
        root.legacy_renderSubtreeIntoContainer(
          parentComponent,
          children,
          callback,
        );
      } else {
        root.render(children, callback);
      }
    });

執(zhí)行updateContainer(children, root, null, work._onCommit);方法，這個(gè)方法最終調(diào)用enqueueUpdate和scheduleWork,并返回expireTime，這些進(jìn)行調(diào)度算法和進(jìn)行優(yōu)先級判斷

感謝各位的閱讀！關(guān)于ReactDom.render指的是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！