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

創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)，為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)開發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類網(wǎng)站都可以開發(fā)，高端網(wǎng)站設(shè)計(jì)，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢，價(jià)格優(yōu)惠，收費(fèi)合理。

步驟

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é)果，再來(lái)看看這個(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ù)用原來(lái)的節(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)先級(jí)判斷

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

分享名稱：ReactDom.render指的是什么-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://www.chinadenli.net/article18/djoggp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、云服務(wù)器、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)