v19.2Latest

Introduction

React Compiler est un nouvel outil de build qui optimise automatiquement votre application React. Il fonctionne avec du JavaScript standard et comprend lesRègles de React, vous n'avez donc pas besoin de réécrire votre code pour l'utiliser.

Vous allez apprendre
  • Ce que fait React Compiler
  • Commencer avec le compilateur
  • Stratégies d'adoption progressive
  • Débogage et dépannage en cas de problème
  • Utiliser le compilateur sur votre bibliothèque React

Que fait React Compiler ?

React Compiler optimise automatiquement votre application React au moment du build. React est souvent assez rapide sans optimisation, mais parfois vous devez mémoïser manuellement les composants et les valeurs pour garder votre application réactive. Cette mémoïsation manuelle est fastidieuse, facile à mal faire et ajoute du code supplémentaire à maintenir. React Compiler effectue cette optimisation automatiquement pour vous, vous libérant de cette charge mentale afin que vous puissiez vous concentrer sur le développement de fonctionnalités.

Avant React Compiler

Sans le compilateur, vous devez mémoïser manuellement les composants et les valeurs pour optimiser les re-rendus :

Note

Cette mémoïsation manuelle contient un bug subtil qui casse la mémoïsation :

Même sihandleClickest enveloppé dansuseCallback, la fonction fléchée() => handleClick(item)crée une nouvelle fonction à chaque rendu du composant. Cela signifie queItemrecevra toujours une nouvelle proponClick, cassant la mémoïsation.

React Compiler est capable d'optimiser cela correctement avec ou sans la fonction fléchée, garantissant queItemne se re-rend que lorsqueprops.onClickchange.

Après React Compiler

Avec React Compiler, vous écrivez le même code sans mémoïsation manuelle :

Voir cet exemple dans le React Compiler Playground

React Compiler applique automatiquement la mémoïsation optimale, garantissant que votre application ne se re-rend que lorsque c'est nécessaire.

Deep Dive
Quel type de mémorisation React Compiler ajoute-t-il ?

Devrais-je essayer le compilateur ?

Nous encourageons tout le monde à commencer à utiliser React Compiler. Bien que le compilateur soit encore un ajout optionnel à React aujourd'hui, à l'avenir, certaines fonctionnalités pourraient nécessiter le compilateur pour fonctionner pleinement.

Est-il sûr de l'utiliser ?

React Compiler est maintenant stable et a été testé de manière approfondie en production. Bien qu'il ait été utilisé en production dans des entreprises comme Meta, le déploiement du compilateur en production pour votre application dépendra de l'état de santé de votre base de code et du respect desRègles de React.

Quels outils de build sont pris en charge ?

React Compiler peut être installé surplusieurs outils de buildtels que Babel, Vite, Metro et Rsbuild.

React Compiler est principalement un wrapper léger de plugin Babel autour du compilateur central, conçu pour être découplé de Babel lui-même. Bien que la version stable initiale du compilateur restera principalement un plugin Babel, nous travaillons avec les équipes swc etoxcpour construire une prise en charge de première classe pour React Compiler afin que vous n'ayez pas à réajouter Babel à vos pipelines de build à l'avenir.

Les utilisateurs de Next.js peuvent activer le React Compiler invoqué par swc en utilisantv15.3.1et supérieur.

Que dois-je faire concernant useMemo, useCallback et React.memo ?

Par défaut, React Compiler mémorisera votre code en fonction de son analyse et de ses heuristiques. Dans la plupart des cas, cette mémorisation sera aussi précise, voire plus, que ce que vous auriez pu écrire.

Cependant, dans certains cas, les développeurs peuvent avoir besoin de plus de contrôle sur la mémorisation. Les hooksuseMemoetuseCallbackpeuvent continuer à être utilisés avec React Compiler comme échappatoire pour contrôler quelles valeurs sont mémorisées. Un cas d'utilisation courant est lorsqu'une valeur mémorisée est utilisée comme dépendance d'un effet, afin de garantir qu'un effet ne se déclenche pas à plusieurs reprises même lorsque ses dépendances ne changent pas de manière significative.

Pour le nouveau code, nous recommandons de s'appuyer sur le compilateur pour la mémorisation et d'utiliseruseMemo/useCallbacklà où c'est nécessaire pour obtenir un contrôle précis.

Pour le code existant, nous recommandons soit de laisser la mémorisation existante en place (la supprimer peut modifier la sortie de compilation), soit de tester soigneusement avant de supprimer la mémorisation.

Essayez React Compiler

Cette section vous aidera à démarrer avec React Compiler et à comprendre comment l'utiliser efficacement dans vos projets.

Ressources supplémentaires

En plus de cette documentation, nous vous recommandons de consulter leGroupe de travail React Compilerpour des informations et discussions supplémentaires sur le compilateur.

上一篇Compilateur React下一篇Installation