Comment implémenter les hooks en réaction ? Dois-je recourir à la Fibre ?

reactComment implémenter les hooks ? La mise en œuvre de React Hooks doit-elle s'appuyer sur la Fibre ? L'article suivant vous montrera comment les hooks sont implémentés dans différents frameworks. J'espère qu'il vous sera utile !

Les hooks de React sont des fonctionnalités apparues après la fibre, donc beaucoup de gens croient à tort que les hooks doivent s'appuyer sur la fibre pour être implémentés. En fait, ce n'est pas nécessairement le cas. [Recommandation associée : Tutoriel vidéo Redis]

Désormais, les hooks ne sont pas seulement implémentés dans React, mais cette fonctionnalité est également implémentée dans des frameworks tels que preact, React Ssr, Midway, etc. Leur implémentation ne repose pas sur la fibre.

Regardons comment les hooks dans ces différents frameworks sont implémentés :

Comment React implémente les hooks

react décrit l'interface via jsx, qui sera compilée dans une fonction de rendu par des outils de compilation tels que babel ou tsc , puis exécutez pour générer vdom :

La fonction de rendu ici était React.createElement avant React17 :

Après React 17, elle a été modifiée en jsx :

Ce runtime jsx sera automatiquement introduit Il n’est pas nécessaire de conserver une importation React pour chaque composant comme auparavant.

L'exécution de la fonction de rendu génère un vdom :

La structure de vdom est la suivante :

Avant React16, ce vdom sera rendu récursivement, en ajoutant, supprimant et modifiant le vrai dom.

Après l'introduction de l'architecture fibre dans React16, il y a eu une étape supplémentaire : d'abord convertir vdom en fibre, puis restituer la fibre.

Le processus de conversion de vdom en fibre est appelé réconciliation, et le processus final d'ajout, de suppression et de modification du vrai dom est appelé commit.

Pourquoi devons-nous faire une telle conversion ?

Étant donné que vdom n'a que des références aux nœuds enfants enfants et n'a pas de références au nœud parent parent et aux autres nœuds frères, cela entraîne la nécessité de restituer de manière récursive tous les nœuds vdom vers le dom en même temps sans interruption.

Que se passe-t-il si je suis interrompu ? Étant donné que le nœud parent et les nœuds frères ne sont pas enregistrés, nous pouvons uniquement continuer à traiter les nœuds enfants, mais nous ne pouvons pas traiter les autres parties du vdom.

C'est pourquoi React a introduit ce type de structure fibreuse, c'est-à-dire qu'il existe des références telles que le retour du nœud parent, le nœud enfant, le nœud frère frère, etc., qui peuvent être interrompues, car tous les nœuds non traités peuvent être trouvés après interruption et récupération. . La structure du nœud

fiber est la suivante :

Ce processus peut être interrompu, et naturellement il peut être programmé, ce qui est le processus schdule.

L'architecture fibre est donc divisée en trois étapes : planifier, réconcilier (convertir vdom en fibre) et valider (mettre à jour vers dom).

Les hooks peuvent être utilisés dans les composants de fonction pour accéder à certaines valeurs, et ces valeurs sont stockées sur des nœuds de fibre.

Par exemple, 6 hooks sont utilisés dans ce composant fonction :

Ensuite, le nœud de fibre correspondant a une liste chaînée d'état mémorisé de 6 éléments :

Concaténé jusqu'au suivant :

Différents Les hooks accéder aux valeurs sur différents éléments de la liste chaînée memorizedState. C'est le principe des hooks de réaction.

Cette liste chaînée comporte une phase de création et une phase de mise à jour, vous constaterez donc que l'implémentation finale de useXxx est divisée en mountXxx et updateXxx :

La phase de montage ici consiste à créer des nœuds hook et à les assembler en un liste chaînée :

La liste chaînée de crochets créée sera liée à l'attribut memorizedState du nœud fibre.

Lors de la mise à jour, vous pouvez naturellement retirer la liste de hooks du nœud fibre :

De cette façon, l'api useXxx peut retrouver l'état mémorisé correspondant sur le nœud fibre lors de plusieurs rendus.

C'est le principe des crochets de réaction. Vous pouvez voir qu'il stocke les crochets sur les nœuds de fibre.

Alors, quelle est la différence entre préact ?

preact Comment implémenter des hooks

preact est un framework plus léger compatible avec le code React. Il prend en charge les composants de classe et les composants de fonction, ainsi que les fonctionnalités de réaction telles que les hooks. Cependant, il n’implémente pas l’architecture fibre.

Parce qu'il considère principalement la taille ultime (seulement 3 Ko), pas l'ultime en termes de performances.

Nous venons d'apprendre que React stocke la liste de hooks sur le nœud fibre. Si preact n'a pas de nœud fibre, où la liste de hooks sera-t-elle stockée ?

En fait, il est facile de penser que la fibre vient de modifier vdom pour améliorer les performances, et il n'y a pas de différence essentielle avec vdom. Alors ne pouvons-nous pas simplement stocker le hook sur vdom ?

En effet, preact met la liste des hooks sur vdom.

Par exemple, ce composant fonctionnel a 4 hooks :

Son implémentation consiste à accéder au hook correspondant sur vdom :

Il ne divise pas le hook en mount et update comme réagir Les deux les étapes sont plutôt fusionnées et traitées ensemble.

Comme le montre l'image, il stocke les hooks dans le tableau de component.__hooks et y accède via des indices.

Ce composant est un attribut sur vdom :

C'est-à-dire que la valeur des hooks est stockée dans le tableau de vnode._component._hooks.

Comparez la différence entre réagir et preact dans l'implémentation des hooks :

• react stocke la liste de hooks sur l'attribut fiberNode.memorizedState, tandis que preact stocke la liste de hooks sur l'attribut vnode._component._hooks

• react Le hook list dans preact est concaténée jusqu'à next. La liste de hooks dans preact est un tableau et est accessible via des indices

• react sépare la création et la mise à jour de la liste de hooks, c'est-à-dire que useXxx sera divisé en mountXxx et updateXxx, tandis que useXxx sera divisé en mountXxx et updateXxx. preact

est fusionné et traité ensemble. Par conséquent, l'implémentation de hooks ne repose pas sur la fibre, elle trouve simplement un emplacement pour stocker les données du hook correspondant au composant. Il suffit de les récupérer lors du rendu. Peu importe où il est stocké.

Parce que le rendu vdom, fibre et composant est fortement lié, ils sont stockés dans ces structures.

Comme React Ssr pour implémenter des hooks, il n'existe ni sur fibre ni sur vdom :

Comment React ssr implémente des hooks

En fait, en plus de Csr, le package React-Dom peut aussi faire ssr :

Quand en utilisant csr, utilisez la méthode render de réagir-dom :

Lorsque vous utilisez ssr, utilisez la méthode renderToString ou la méthode renderToStream de réagir-dom/server :

Pensez-vous que vdom sera converti en fibre lorsque utiliser ssr ?

Absolument pas. Fiber est une structure introduite pour améliorer les performances de rendu lors de l'exécution dans le navigateur, rendre les calculs interrompus et effectuer des calculs en cas d'inactivité.

Le rendu côté serveur ne nécessite naturellement pas de fibre.

Si la fibre n'est pas nécessaire, où stocke-t-elle la liste des hameçons ? vdom?

Il peut effectivement être placé dans vdom, mais ce n'est pas le cas.

Par exemple, utilisez les hooksRef :

Il s'agit d'une liste chaînée concaténée avec next à partir de firstWorkInProgressHook.

Et le premier nœud hook créé par firstWorkInProgressHook à l'aide de createHook :

n'est pas monté sur vdom.

Pourquoi ?

Étant donné que ssr ne doit être rendu qu'une seule fois et n'a pas besoin d'être mis à jour, il n'est pas nécessaire de l'accrocher sur vdom.

Effacez simplement la liste des crochets chaque fois que vous avez fini de traiter les crochets de chaque composant :

Ainsi, lors de la réaction ssr, des hooks existent dans les variables globales.

Comparez la différence dans les principes d'implémentation des hooks dans React Csr et Ssr :

• Csr créera une fibre à partir de vdom, qui est utilisée pour rendre le rendu interrompu et améliorer les performances grâce à la planification inactive, tandis que ssr ne le fait pas. Oui, vdom directement rend

• csr et enregistre les hooks sur le nœud de fibre lorsque ssr est utilisé, il est directement placé sur la variable globale et est effacé après le traitement de chaque composant. Parce qu'il ne sera pas utilisé une seconde fois

• csr divisera la création et la mise à jour des hooks en deux phases : le montage et la mise à jour, tandis que ssr ne sera traité qu'une seule fois, seule la phase de création

Principe de implémentation des hooks En fait, ce n'est pas compliqué, cela stocke simplement une liste chaînée dans un certain contexte, puis l'API des hooks accède aux données correspondantes des différents éléments de la liste chaînée pour compléter leur logique respective. Ce contexte peut être un vdom, une fibre ou même une variable globale.

Cependant, l'idée des hooks est toujours très populaire. Le framework côté serveur midway publié par Taobao a introduit l'idée des hooks :

midway Comment implémenter des hooks

midway est un Node. js framework :

Le framework côté serveur n'a naturellement pas de structures telles que vdom et fibre, mais l'idée des hooks ne repose pas sur celles-ci. Pour implémenter l'API hooks, il vous suffit de placer un lien. liste dans un certain contexte.

midway a implémenté une API similaire aux hooks de réaction :

Je n'ai pas vu où existe la liste de hooks, mais nous maîtrisons déjà le principe d'implémentation des hooks tant qu'il y a un contexte pour. stockez la liste de crochets, tout ira bien, n'importe où, c'est bien.

Résumé

Les hooks React sont une fonctionnalité apparue après l'architecture React Fiber De nombreuses personnes croient à tort que les hooks doivent être implémentés avec Fiber, respectivement. , et j'ai trouvé que Pas comme ça :

• react convertit vdom en fibre, puis stocke la liste de hooks dans l'attribut fibre.memorizedState et la concatène via la prochaine
• preact n'implémente pas la fibre, il place la liste de hooks dans le Attribut vnode._component._hooks Ci-dessus, implémentation du tableau, aucune fibre n'est nécessaire lors de l'accès à
• react ssr via des indices, mais la liste de hooks n'est pas accrochée à vdom, mais directement placée sur une variable globale, car elle ne doit être rendue qu'une seule fois , et après avoir rendu un Le composant efface simplement cette variable globale
• midway est un framework Node.js, qui implémente également des API similaires aux hooks. Nous n'entrons pas dans les détails sur l'endroit où le placer, mais tant qu'il y a un. contexte pour stocker la liste d'hameçons, tout ira bien

Alors, réagissez les hameçons Devons-nous compter sur la fibre pour y parvenir ?

Évidemment non, il peut être utilisé avec fibre, vdom, variables globales ou même n'importe quel contexte.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !

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!