Découvrez les dernières améliorations de React JS 17

Bien qu'il n'y ait pas trop de choses à mettre en évidence dans la nouvelle version de React JS 17, il y a quelques nouvelles améliorations à haute résistance au React JS Core.

Les dernières améliorations

L'amélioration la plus intéressante est la façon dont React JS est compilé. Examinons le code compilé de JSX dans un composant qui utilise une ancienne version de React JS:

Utilisez la fonction «React.createElement» où la dépendance React JS doit être disponible dans la portée. Il est important que vous importiez React JS en premier lieu dans chacun des composants.

Une fois que vous avez mis à niveau vers React JS 17, vous pouvez supprimer les importations React JS du code de votre composant si ce n'est que pour JSX.

Le la version compilée ne nécessite pas l'importation React. Comme vous pouvez le voir dans l'image ci-dessous, le compilateur React JS 17 importe une nouvelle dépendance de «react / jsx-runtime», qui gère la transformation JSX.

Il est important de comprendre que l'ensemble L'effet sera visible lorsque vous avez plus de composants React JS dans votre base de code.

Pourquoi vous devez supprimer l'import React JS

Réduction de la taille du bundle

Votre sortie groupée compilée deviendra plus petite lorsque vous supprimez l'importation React JS. Vous devez supprimer l'importation React JS de chacun des composants où le compilateur le remplace par un sous-module dans React JS, comme indiqué ci-dessous.

Sharing Components is Easier

Cela peut ne pas sembler beaucoup, mais lorsque vous publiez des composants sur Node Package Manager (NPM), vous devez vous assurer que React n'est pas configuré comme une «dépendance», mais plutôt comme une «peerDependency». Cela réduit la taille de regroupement de vos composants et évite les cas où React JS est installé plusieurs fois avec différentes versions.

Réduction de la recherche de propriétés dynamiques

React JS 17 n'utilise plus «React.createElement» pour JSX et élimine le besoin d'une recherche de propriété dynamique. Vous pouvez le trouver dans la version compilée de la base de code frontale.

Cependant, l'amélioration des performances est minime et vous remarquerez à peine la différence car les moteurs JavaScript modernes sont principalement optimisés pour la recherche de propriétés dynamiques.

Modifications de la délégation d'événements

Dans React JS 17, React JS n'attachera plus de gestionnaires d'événements au niveau du document. Au lieu de cela, il les attachera au conteneur DOM racine dans lequel votre arbre React JS est rendu.

Pensez à attacher un événement «onClick» à un bouton dans React JS comme dans l'exemple ci-dessous:

Dans le code ci-dessus, l'équivalent JS une fois compilé ressemblera à ceci:

React JS attache alors un gestionnaire par type d'événement directement au nœud de document, par opposition à l'attacher aux nœuds DOM déclarés à l'origine . C'est ce qu'on appelle la délégation d'événements.

Dans React JS 17, les gestionnaires d'événements ne seront plus attachés au niveau du document, mais ils seront attachés au conteneur DOM où l'arborescence a été rendue. [19659005]

Avec ce changement dans React JS 17, il est maintenant sûr d'imbriquer des applications construites avec différentes versions de React JS.

Modifications de rupture mises à jour

Il y a quelques nouveaux changements de rupture avec cette version.

Alignement avec les navigateurs

React JS a apporté quelques modifications liées au système d'événements:

• L'événement «onScroll» ne bouillonne plus
• Les «onBlur» et «onFocus» Les événements sont maintenant passés à l'utilisation des événements natifs «focusin» et «focusout» en interne pour correspondre au comportement existant de React et fournir plus d'informations.
• Le «onClickCapture» utilise désormais les écouteurs de phase de capture du navigateur

No Event Pooling

L'optimisation du regroupement d'événements a été supprimée de ce s nouvelle version de React JS en raison de la confusion persistante et de son manque d’amélioration des performances.

Mise à niveau du temps de nettoyage des effets

Cette nouvelle version fait également le «useEffect» synchronisation de la fonction de nettoyage de crochet plus cohérente.

Dans React JS 16, la fonction de nettoyage d'effet s'exécute de manière synchrone. Dans React JS 17, la fonction de nettoyage des effets s'exécute toujours de manière asynchrone – par exemple, si le composant est démonté, le nettoyage s'exécute après la mise à jour de l'écran.

La dernière version est très importante

Le JSX transform est rétrocompatible là où le changement est minime pour mettre à niveau vers React JS 17. Bien que la plupart de ces améliorations ne soient pas aussi visibles dans le monde réel, il est également important de comprendre que la plupart de ces améliorations accéléreront les futures versions. La mise à niveau vers React JS 17 rendra votre base de code à l'épreuve du temps et vous n'aurez pas besoin de vous rappeler de conserver l'importation React JS dans vos fichiers JSX. Pour plus d'informations sur cette mise à jour, contactez nos experts techniques dès aujourd'hui .

À propos de l'auteur

Kajal Bhanse est consultante technique associée chez Perficient Inc. Elle travaille actuellement en tant que développeur front-end avec le CAT équipe. Elle aime explorer de nouvelles choses dans les technologies front-end.

Plus de cet auteur