Qu'est-ce que le compilateur React ?

Le compilateur React est un nouveau compilateur expérimental qui promet de révolutionner la façon dont les applications React sont optimisées pour les performances.

Vous pouvez lire et écouter cet article au format podcast sur ce lien Medium gratuit.

Qu'est-ce qu'un compilateur ?

En bref, un compilateur est un programme qui traduit un langage de programmation (le langage source) en un autre (le langage cible).

Un compilateur traduit une langue source vers une langue cible

Par exemple, JSX et TSX sont compilés en JavaScript (avec Babel ou autres) pour que le navigateur comprenne le code.

Pourquoi un nouveau compilateur React ?

L'une des principales raisons que j'ai entendues est l'optimisation des performances.

Parfois, les applications React souffrent de rendus inutiles, entraînant des problèmes de performances.
Les développeurs peuvent optimiser le code à l'aide de la mémorisation, des rappels, etc. Mais cela se traduit souvent par un composant encombré rempli d'appels de mémorisation.

Quelle est la solution du compilateur React ?

En bref, React Compiler devrait optimiser automatiquement votre code, réduisant ainsi le besoin d'optimisation manuelle des performances.

En conséquence, React Compiler devrait améliorer la réactivité de l'application.

Plongeons-y.

Qu’est-ce que le compilateur React ?

Le compilateur React est un compilateur expérimental déjà disponible dans React 18. Il s'agit, et sera très probablement, d'un outil facultatif même dans React 19.

L'utilisation de React Compiler dans React 18 nécessite une configuration manuelle mais vous pouvez déjà l'essayer.

Le compilateur React est conçu pour fonctionner au sein de l'écosystème de React 19

Installer le compilateur React

Bien que React Compiler soit utilisé en production sur Instagram, il est open source en version bêta et disponible sur React 17 .

Le compilateur est livré avec un plugin eslint fortement recommandé qui affiche l'analyse du compilateur dans l'éditeur.

Vous pouvez utiliser le plugin eslint même si vous n'utilisez pas React Compiler.

Bilan de santé du compilateur React

Avant d'installer React Compiler, il est recommandé de vérifier la compatibilité.

Exécutez la commande suivante :

npx react-compiler-healthcheck@beta

pour obtenir un résultat comme ci-dessous :

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

Un nombre plus élevé de composants compilés est une bonne chose. C'est le nombre de composants qui peuvent être optimisés avec succès.

Mon StrictMode n'est pas activé, mais le fait de l'activer et de le suivre signifie plus de chances que les règles de React soient respectées.
Nous devrions donc probablement le garder activé.

Enfin, réagissez-compiler-healthcheck vérifie les bibliothèques connues incompatibles avec le compilateur. Je n'en ai pas, mais MobX vous posera des problèmes. Ça ne marchera pas.

Installation du compilateur React

Installez React Compiler à l'aide de npm :

npx react-compiler-healthcheck@beta

Ou, si vous utilisez Yarn :

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

Vous devez également ajouter le plugin eslint à la configuration. Dans mon cas, il s'agit d'un fichier .eslintrc.js.

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

Une fois le plugin eslint correctement configuré, vous pourriez recevoir des avertissements concernant les règles de React. Vous pouvez les mettre à jour sur place ou plus tard.

La seule différence est que dans le deuxième cas, React a ignoré l'optimisation de ce composant ou de ce hook.

Vous pouvez lire et écouter cet article au format podcast sur ce lien Medium gratuit.

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!