ReactDom.renderの詳細な分析

この記事では、ReactDom.render について詳しく分析した、参考値のある内容を紹介しますので、困っている方は参考にしていただければ幸いです。

#手順

1. ReactRoot の作成

2. FiberRoot と FiberRoot の作成

#3. Update の作成

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 メソッドは、ReactElement、DOM ラッピング ノード、レンダリング後に実行されるコールバック メソッドを含む 3 つのパラメータを渡すことができます。

次に、
invariant コンテナが有効な Dom ノードであるかどうかを確認します。 最後に、
legacyRenderSubtreeIntoContainer メソッドの実行後に結果を返します。このメソッドのパラメータを見てみましょう。

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

ここでは 5 つのパラメータが渡されます。最初のパラメータは次のとおりです。 parentComponent が存在せず、null が渡されます。2 番目はコンテナに渡される子要素、3 番目は ReactRoot を作成するラッピング要素、4 番目は更新を調整するオプション、5 番目はレンダリング後のコールバック メソッドです。

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

まず ReactRoot が存在するかどうかを確認してから、コンテナに渡された

legacyCreateRootFromDOMContainer
関数を forceHydrate が ReactRoot を作成した後に実行します。 renderメソッドのforceHydrateに渡されるfalseと、Hydrateメソッドに渡されるtrueは主にサーバーサイドレンダリングとクライアントサイドレンダリングを区別するためのもので、trueの場合は元のノードが再利用されずサーバーサイドレンダリングに適しています。 ##false の場合 container.removeChild(rootSibling)
を実行してすべての子ノードを削除します。 その後、 new ReactRoot(container, isConcurrent, shouldHydrate)
を介して戻ります。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function ReactRoot(   container: DOMContainer,   isConcurrent: boolean,   hydrate: boolean, ) {   const root = createContainer(container, isConcurrent, hydrate);   this._internalRoot = root; }</pre><div class="contentsignin">ログイン後にコピー</div></div>このメソッドで

createContainer

を呼び出してルートを作成します。このメソッドは ## から始まります。 # react-reconciler/inline.domファイルに導入:

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

このメソッドでは、createFiberRoot メソッドを呼び出して FiberRoot を作成します

ルートの作成後に実行します unbatchedUpdatesUpdate、root に渡します。 render メソッドの更新:

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

Execute updateContainer(children, root, null, work._onCommit); メソッド。このメソッドは最終的に

enqueueUpdate と scheduleWork# を呼び出します。 ## を返し、スケジュール アルゴリズムと優先度の判断を実行する、expireTime を返します。[関連する推奨事項: react ビデオ チュートリアル ]

以上がReactDom.renderの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。