Analyse détaillée de ReactDom.render

Cet article vous apporte une analyse détaillée de ReactDom.render. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Étapes

1. Créer ReactRoot

2. Créer FiberRoot et FiberRoot

3. >

Méthode de rendu :

La méthode de rendu peut transmettre trois paramètres, notamment ReactElement, le nœud d'encapsulation DOM et une méthode de rappel exécutée après le rendu.

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

Vérifiez ensuite

Vérifiez que le conteneur est un nœud Dom valide.
Renvoie enfin le résultat après l'exécution de la méthode invariant Jetons un coup d'œil aux paramètres de cette méthode
legacyRenderSubtreeIntoContainer

Cinq paramètres sont transmis ici. Le premier est que parentComponent ne le fait pas. existent et null est transmis. Le deuxième est le premier est l'élément enfant passé dans le conteneur, le troisième est l'élément d'emballage qui crée ReactRoot, le quatrième est l'option pour coordonner les mises à jour et le cinquième est la méthode de rappel après le rendu. .

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

Vérifiez d'abord si ReactRoot existe, puis exécutez le conteneur transmis. La fonction

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

après que

forceHydrate crée un ReactRoot. ForceHydrate passe false dans la méthode render et true dans la méthode Hydrate, principalement pour distinguer le rendu côté serveur et le rendu côté client. Lorsqu'il est vrai, le nœud d'origine n'est pas réutilisé et convient au rendu côté serveur
Si c'est le cas. est faux Ensuite, exécutez legacyCreateRootFromDOMContainer pour supprimer tous les nœuds enfants.
retourne ensuite via container.removeChild(rootSibling) :
new ReactRoot(container, isConcurrent, shouldHydrate)

Dans cet appel de méthode

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

pour créer la racine, cette méthode est importée du fichier

 : createContainerreact-reconciler/inline.dom

in Dans cette méthode, la méthode

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

est appelée pour créer FiberRoot

Après avoir créé la racine, effectuez la mise à jour createFiberRoot et transmettez la racine. Mise à jour de la méthode de rendu :
unbatchedUpdates

exécute la méthode

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

, qui appelle finalement

et updateContainer(children, root, null, work._onCommit);, et renvoie expireTime, qui exécute l'algorithme de planification et le jugement de priorité enqueueUpdatescheduleWork [ Recommandations associées :

Tutoriel vidéo React

]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!