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

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)公司將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

步驟

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

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

這里傳入五個參數(shù)，第一個是parentComponent不存在傳入null，第二個是傳入container的子元素，第三個是創(chuàng)建ReactRoot的包裹元素，第四個是協(xié)調(diào)更新的選項(xiàng)，第五個是渲染后的回調(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)建一個ReactRoot。forceHydrate在render方法中傳入的false，在Hydrate方法中傳入的true，主要是為了區(qū)分服務(wù)端渲染和客戶端渲染，true時未復(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;
}

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

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

在這個方法中又調(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);方法，這個方法最終調(diào)用enqueueUpdate和scheduleWork,并返回expireTime，這些進(jìn)行調(diào)度算法和進(jìn)行優(yōu)先級判斷

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

網(wǎng)站題目：ReactDom.render指的是什么
文章鏈接：http://www.rwnh.cn/article42/psgpec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、商城網(wǎng)站、網(wǎng)站營銷、App開發(fā)、網(wǎng)站設(shè)計(jì)公司、微信公眾號

廣告

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