Detaillierte Analyse von ReactDom.render

Dieser Artikel bietet Ihnen eine detaillierte Analyse von ReactDom.render. Freunde in Not können darauf verweisen.

Schritte

1. ReactRoot erstellen

3. Update erstellen

Render-Methode:

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,
    );
  },

Die Render-Methode kann drei Parameter übergeben, darunter ReactElement, DOM-Wrapping-Knoten und eine nach dem Rendern ausgeführte Rückrufmethode.

Dann überprüfen Sie

Überprüfen Sie, ob der Container ein gültiger Dom-Knoten ist.
Schließlich wird das Ergebnis nach der Ausführung der invariant-Methode zurückgegeben.

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

legacyRenderSubtreeIntoContainer Der erste Parameter ist, dass parentComponent dies nicht tut exist und null werden übergeben. Das zweite ist die Übergabe der untergeordneten Elemente des Containers, das dritte ist das Wrapping-Element zum Erstellen von ReactRoot, das vierte ist die Option zum Koordinieren von Aktualisierungen und das fünfte ist die Rückrufmethode nach dem Rendern.

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

Überprüfen Sie zunächst, ob ReactRoot vorhanden ist, und führen Sie dann den übergebenen Container aus. Die

-Funktion nach

forceHydrate erstellt einen ReactRoot. ForceHydrate übergibt false in der Render-Methode und true in der Hydrate-Methode, hauptsächlich zur Unterscheidung zwischen serverseitigem Rendering und clientseitigem Rendering. Wenn „true“, wird der ursprüngliche Knoten nicht wiederverwendet und ist für serverseitiges Rendering geeignet ist falsch. Führen Sie dann
aus, um alle untergeordneten Knoten zu löschen. legacyCreateRootFromDOMContainer kehrt dann über
zurück: container.removeChild(rootSibling)

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

in dieser Methode ruft new ReactRoot(container, isConcurrent, shouldHydrate) auf, um Root zu erstellen, diese Methode wird aus der

-Datei importiert:

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

createContainer in dieser Methode erneut Die react-reconciler/inline.dom-Methode wird aufgerufen, um FiberRoot zu erstellen. Führen Sie nach dem Erstellen des Stammverzeichnisses das

-Update durch und übergeben Sie das Stammverzeichnis. Aktualisierung der Rendermethode: createFiberRoot

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

führt die Methode unbatchedUpdates aus, die letztendlich und

aufruft, und gibt „expireTime“ zurück, das Planungsalgorithmen und Prioritätsbeurteilungen ausführt updateContainer(children, root, null, work._onCommit);enqueueUpdate [Verwandte Empfehlung: scheduleWorkVideo-Tutorial reagieren

]

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse von ReactDom.render. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!