Quelle est la différence entre les versions React15 et React16 ?

Différences : 1. L'architecture de la version 15 est divisée en deux parties : coordinateur et moteur de rendu, tandis que l'architecture de la version 16 est divisée en trois parties : planificateur, coordinateur et moteur de rendu 2. Le réconciliateur de la version 15 fonctionne de manière récursive et synchrone ; , et la version 16 du réconciliateur utilise des mises à jour asynchrones interrompues au lieu des mises à jour synchrones de la version 15.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React16&&React15, ordinateur Dell G3.

Quelle est la différence entre React15 et la version 16

1. L'architecture de React15 peut être divisée en deux couches :

Réconciliateur (coordinateur) - Découvrez les composants qui doivent être mis à jour et identifiez comment pour mettre à jour

Renderer (Renderer) - Responsable du rendu des composants modifiés sur la page

II L'architecture de React16 peut être divisée en trois couches :

Scheduler (Scheduler) - La priorité des tâches de planification, élevée. les prioritaires entrent dans la première phase du réconciliateur

Réconciliateur (coordinateur) - Découvrez les composants qui doivent être mis à jour et identifiez comment mettre à jour

Renderer (Renderer) - Responsable du rendu des composants modifiés sur la page

Dit devant :

Navigateur Le mécanisme de 16,6 ms

Pour l'œil humain, le taux de rafraîchissement normal et fluide est de 60 Hz, soit 60 images, c'est-à-dire que le navigateur s'actualise une fois toutes les 16,6 ms.

Nous savons que js peut faire fonctionner des éléments dom, donc le thread GUI du navigateur et le thread js s'excluent mutuellement. L'exécution de js et le dessin et la mise en page du navigateur ne peuvent pas être effectués en même temps. Par conséquent, le navigateur doit effectuer les opérations suivantes toutes les 16,6 ms :

Exécution du script JS ------ Disposition style navigateur ------ Dessin style navigateur

Si le temps d'exécution du script js est trop long, plus de 16,6 ms, le dessin et la mise en page du navigateur ne peuvent pas être exécutés lors de ce rafraîchissement, ce qui provoquera des blocages reconnaissables à l'œil humain. On constate que le navigateur ne répond pas en « temps réel » lors des opérations. Par exemple : si l'utilisateur saisit du contenu dans la zone de saisie, cela se traduit par une pression sur le bouton du clavier, mais la saisie n'est pas affichée en temps réel sur la page.

La différence entre 15 et 16

le réconciliateur de React15 est le réconciliateur de pile. C'est-à-dire qu'il fonctionne sous une forme récursive, est synchrone et ne peut pas être interrompu pendant le processus de génération et de comparaison de l'arborescence DOM virtuelle. De cette façon, lorsque le niveau du composant est trop profond, le temps d'exécution de js sera trop long et le navigateur ne pourra pas mettre en page et dessiner, ce qui entraînera une perte de trame.

Le réconciliateur de React16 est un réconciliateur de fibres. Autrement dit, la mise à jour asynchrone interrompue est utilisée à la place de la mise à jour synchrone de React15. Le planificateur de React16 indiquera au réconciliateur si le navigateur a du temps libre pour exécuter le script js. Cela n'affectera pas le travail de dessin et de mise en page du navigateur. Aucune image perdue.

Dans React16, le DOM virtuel d'origine, parce que sa structure ne peut plus répondre aux besoins des mises à jour asynchrones interrompues, utilise à la place la nouvelle structure Fibre. Les nœuds DOM virtuels correspondent aux nœuds Fibre et les arborescences DOM virtuelles correspondent aux arborescences Fibre.

Apprentissage recommandé : "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!