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

Ü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,
)

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

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

Nach dem Login kopieren

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

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

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

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!