Un aperçu de ses mises à jour et de ses nouvelles fonctionnalités

Le sujet et la tendance les plus discutés en JavaScript à l’heure actuelle sont React 18. React v18.0, qui offre les améliorations de rendu simultanées très attendues, a finalement été publié par l’équipe React.

Qu’est-ce que React JS ?

React est un package JavaScript qui vous permet de créer des applications mobiles et en ligne dynamiques et rapides. Il s’agit d’une bibliothèque open source basée sur des composants frontaux JavaScript.

React est un hybride JavaScript et HTML. Il offre une approche solide et bien informée pour développer des applications modernes.

Examinons de plus près chacune de ces mises à niveau. Mais d’abord, apprenons comment mettre à jour React si vous ne l’avez pas déjà fait.

Comment passer à React 18

Installez React 18 et React DOM à partir de npm ou de fil, comme ceci :

Ensuite, vous souhaiterez utiliser createRoot au lieu de render.

Dans votre index.js, mettez à jour ReactDOM.render vers ReactDOM.createRoot pour créer une racine et afficher votre application à l’aide de la racine.

Voici à quoi cela ressemblerait dans React 17

Cliquez ici pour en savoir plus sur React 17

Voici comment cela apparaît dans React 18

Nouvelles fonctionnalités et améliorations de React 18

Concurrence dans React 18

Dans React 18 avec rendu simultané, vous pouvez interrompre, mettre en pause, reprendre ou quitter un rendu. Cela permet à React de répondre rapidement aux entrées de l’utilisateur tout en effectuant une activité de rendu chronophage.

Avant React 18, le rendu était une transaction unique, continue et synchrone qui ne pouvait pas être arrêtée.

La concurrence est une amélioration fondamentale de l’algorithme de rendu React. React peut utiliser la concurrence pour interrompre le rendu.

Exemple:

React 17 : Image illustrant l’obligation d’attendre la fin d’un appel avant d’en décrocher un autre dans une conversation téléphonique standard non simultanée.

Dans React 18 : image montrant comment Alice et Bob peuvent avoir une conversation téléphonique simultanée en mettant un appel en attente pour s’occuper d’un appel plus urgent avec Bob en premier.

Composants côté serveur

Avec l’option d’un composant de secours, tel qu’un spinner ou une chaîne, le composant Suspense de React permet aux développeurs d’arrêter le rendu d’un composant jusqu’à ce qu’une condition donnée soit satisfaite. Dans le passé, le suspense se limitait soit à un chargement lent, soit à une importation dynamique.

Avec React, vous pouvez réaliser un rendu côté serveur (SSR) en rendant d’abord chaque composant sur le serveur, puis en transmettant les éléments HTML qui en résultent au navigateur. Après cela, le navigateur charge le package JavaScript et le connecte aux éléments HTML.

Les utilisateurs peuvent voir le contenu de la page avant le chargement et l’exécution du bundle JavaScript lors de l’utilisation du rendu côté serveur. La version 16.6 de React a ajouté la fonctionnalité de suspense, qui permet de retarder le rendu des composants avec une prise en charge limitée.

Transitions

Une transition est une nouvelle fonctionnalité de React qui fait la distinction entre les mises à jour urgentes et non urgentes.

Mises à jour urgentes montrer un engagement direct, comme taper, cliquer et appuyer.

Transition mises à jour changer l’interface utilisateur d’une vue à une autre.

Les mises à jour urgentes, telles que taper, cliquer ou appuyer, nécessitent une réaction rapide pour correspondre à nos intuitions sur le comportement réel des choses. Sinon, ils se sentent « mal ». Cependant, les transitions sont distinctes car le spectateur ne s’attend pas à voir toutes les valeurs intermédiaires à l’écran.

utiliserTransition : un hook pour démarrer les transitions, avec une valeur pour suivre l’état d’attente.

débutTransition : une technique pour démarrer des transitions lorsque le Hook ne peut pas être utilisé.

Les transitions permettront le rendu simultané, permettant de suspendre la mise à jour.

Mise en lots automatique

React utilise le traitement par lots pour améliorer la vitesse en combinant plusieurs mises à jour d’état en un seul rendu. Nous venons d’utiliser le traitement par lots automatisé dans les gestionnaires d’événements React pour la mise à jour. Les mises à jour à l’intérieur des gestionnaires d’événements natifs, setTimeout, promesses ou tout autre type d’événement n’étaient pas automatiquement regroupées dans React. Ces modifications seront automatiquement traitées par lots par batching automatisé :

Dans React 17

Utiliser React 18

React v18 garantit que les mises à jour d’état sont automatiquement regroupées lorsqu’elles sont appelées depuis n’importe quel endroit. Les mises à jour de l’état du lot incluront les délais d’attente, les intervalles, les actions asynchrones et les gestionnaires d’événements natifs.

Comprendre le mode strict dans React 18

Lors de l’utilisation de React 18, le composant en mode strict sera monté, démonté, puis remonté avec son ancien état. En raison de l’état réutilisable, React peut rapidement monter un écran précédent dans le futur si les arbres sont remontés en utilisant le même état de composant avant le démontage. Le mode strict garantit que les composants peuvent résister à des montages et démontages répétés.

Conclusion

En résumé, les nouvelles fonctionnalités de React 18 améliorent les performances de diverses manières.

Concurrent React vous permet de suspendre et de reprendre le processus de rendu, voire de le quitter complètement. Cela garantit que l’interface utilisateur peut répondre immédiatement aux entrées de l’utilisateur, même si un processus de rendu massif est en cours.

L’API Transitions permet des transitions plus fluides lors des demandes de données ou des changements d’écran tout en permettant à l’utilisateur de continuer ses saisies sans interruption.

React Server Components permet aux développeurs de créer des composants qui s’exécutent à la fois sur le serveur et sur le client, combinant l’interactivité des applications côté client avec l’efficacité du rendu serveur standard tout en évitant le coût de l’hydratation.

La fonctionnalité étendue de Suspense améliore les performances de chargement en permettant à certains éléments d’application de s’afficher avant d’autres, ce qui peut prendre plus de temps pour récupérer les données.