Quoi de neuf dans React 18
React 18 semble prometteur : mise en lots automatique de l’état, nouvelles API et nouveau moteur de rendu du serveur de streaming, tous testés à l’avance. Regardons de plus près.
React ne cesse de s’améliorer à chaque fois qu’une nouvelle version est publiée. C’est le framework JavaScript le plus utilisé pour créer des applications modernes avec une liste incroyable et vaste de fonctionnalités puissantes.
Récemment, l’équipe React a annoncé un plan de version pour la sortie de la nouvelle React 18 version.[19659003]Un groupe de travail a été créé afin de préparer la communauté à l’adoption progressive des nouvelles fonctionnalités de React 18. Un panel d’experts, de développeurs, d’auteurs de bibliothèques et d’éducateurs a été invité à fournir des commentaires, poser des questions et collaborer . Cela signifie que la nouvelle version de React 18 sera entièrement testée au combat et que la communauté en fera partie.
De nombreuses fonctionnalités importantes et modifications de l’API sont à venir dans la prochaine version de React. Nous allons couvrir quelles sont ces fonctionnalités et ces changements et voir comment ils vont affecter la façon dont nous construisons actuellement des applications React.
React 18
La dernière version de React qui a eu un grand impact sur la communauté était la version 16.8. Cette version est sortie avec React Hooks, un moyen puissant de gérer l’état des composants fonctionnels et de réutiliser le code entre eux.
La version React 17 n’a pas apporté trop de changements d’API au cœur du framework JavaScript. Il était davantage axé sur l’amélioration des fondamentaux et la préparation des bases pour les futures mises à jour.
D’autre part, la version React 18 apportera de nombreuses fonctionnalités puissantes pour améliorer l’expérience des développeurs et nous aider à créer des expériences Web incroyables.
Le la nouvelle version de React semble prometteuse. De nombreuses nouvelles fonctionnalités ont été annoncées, telles que le traitement par lots automatique, de nouvelles API et un nouveau moteur de rendu de serveur de streaming. Regardons de plus près.
Suspense
Nous savons que les applications React rendues côté serveur sont très populaires de nos jours. Les frameworks React tels que Next.js sont devenus une solution considérable et puissante pour créer des applications React rendues côté serveur, et l’avenir s’annonce plus prometteur maintenant puisque la prise en charge du rendu côté serveur dans React augmentera en la nouvelle version.
SSR dans React se déroule toujours en plusieurs étapes :
- Sur le serveur, récupérez les données pour l’intégralité de l’application.
- Ensuite, sur le serveur, rendez l’intégralité de l’application au format HTML et envoyez-la dans le réponse.
- Ensuite, sur le client, chargez le code JavaScript pour l’ensemble de l’application.
- Ensuite, sur le client, connectez la logique JavaScript au code HTML généré par le serveur pour l’ensemble de l’application (c’est « l’hydratation ») .
React 18 prendra en charge Suspense sur le serveur et rendra les applications rendues côté serveur plus interactives et perspicaces. Suspense vous permet de diviser votre application React en unités indépendantes plus petites qui ne bloquent pas le reste de votre application lors du chargement.
<Suspense fallback={< Spinner />}> <Commentaires /></Suspense>[19659029] Cela se traduira par une expérience de rendu côté serveur meilleure et plus rapide et vos utilisateurs pourront interagir avec votre application beaucoup plus rapidement. Ces améliorations sont automatiques et vous n'avez pas besoin d'écrire de code de coordination spécial pour qu'elles fonctionnent.Concurrence
Vous avez peut-être déjà entendu parler du terme mode simultané dans React. C’est un nouveau mécanisme qui va être ajouté qui permettra à React de préparer plusieurs versions de l’interface utilisateur en même temps.
Le mode simultané dans React est un ensemble de fonctionnalités qui vont nous aider à avoir des interfaces utilisateur plus fluides et réactives en nous permettant d’empêcher les mises à jour bloquant le rendu et de commencer à avoir un rendu interruptible, ce qui nous permet de prioriser les mises à jour de rendu.
Le mode simultané sera activé dans la nouvelle version de React 18, vous pouvez donc choisir de l’utiliser ou non .
Le traitement par lots automatique
Le traitement par lots est lorsque React regroupe plusieurs mises à jour d’état en un seul rendu pour de meilleures performances. Imaginez que vous ayez une fonction simple, et à l’intérieur de cette fonction vous allez changer deux états différents.
const handleUpdate = { setLoading(false ); setMessage('Updated!');}React regroupe automatiquement ces deux mises à jour d’état en une seule ré- rendre. Le traitement par lots des mises à jour d’état améliore les performances dans l’ensemble de l’application et empêche votre composant de rendre des états « à moitié finis ». les gestionnaires d’événements natifs ou tout autre événement non déjà groupé dans React par défaut.
setTimeout(() => { setLoading([19659040]false); setMessage('Mise à jour !'); }, 1000)[19659020];API racine
Une API racine dans React est un pointeur vers la structure de données de niveau supérieur de votre application que React utilise pour suivre un arbre à restituer.
React a toujours eu une API racine, et dans la nouvelle version 18, cela va être changé. La nouvelle version de React sera livrée avec deux API racine différentes :
- API racine héritée : l’API racine existante s’appelle ReactDOM.render. Il créera une API racine en «mode hérité» lorsqu’il sera utilisé dans une application React 18 et déclenchera un avertissement indiquant que cette API est obsolète et que vous devez passer à la nouvelle API racine.
- Nouvelle API racine : La nouvelle API racine s’appelle ReactDOM.createRoot. Il ajoute toutes les améliorations de React 18 à votre application et vous permettra d’utiliser les fonctionnalités du mode concurrent.
Dans les versions actuelles de React, voici comment nous utilisons l’API racine :
import React de 'react';import ReactDOM from 'react-dom';import App de 'App';ReactDOM.render(<App />, document.getElementById([19659045]'root'));La nouvelle API racine, en revanche, sera légèrement différente :
import ReactDOM from[19659079]'react-dom';import App de 'App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App />);La nouvelle API racine de React sera très similaire à celui « d’héritage ». L’un des changements les plus importants dans la nouvelle API racine est que la méthode hydrate aura disparu et pourra désormais être transmise en tant qu’accessoire à votre composant de niveau supérieur. Le rappel de rendu a également été supprimé pour laisser place à une hydratation partielle. Alors maintenant, si vous devez utiliser le rappel de rendu, vous pouvez le faire à la place :
import React from 'react';import *[19659126]as ReactDOM from 'react-dom';const App = ({ rappel } ) => { return ( <div ref={callback}> <h1>Bonjour tout le monde</h1> </div>[19659146]);}const rootElement = document.getElementById("root")[19659020];const root = ReactDOM.createRoot(rootElement);root.render(<App callback={() => console .log("rendu")} />);Conclusion
La communauté de React est très engagé pour aider l’équipe React à créer et à publier cette nouvelle version majeure de React. L’avenir de React semble prometteur et il y aura des fonctionnalités que nous pensions impossibles à avoir dans un framework JavaScript il y a des années.
React 18 ouvrira de nouvelles possibilités et améliorera les performances des applications React. La meilleure partie est que la mise à niveau vers la version React 18 est une expérience fluide – peu ou pas de modifications sur votre application, et vous remarquerez que votre code « fonctionnera simplement ».
