v19.2Latest

Installation

Diese Anleitung hilft Ihnen, React Compiler in Ihrer React-Anwendung zu installieren und zu konfigurieren.

Sie lernen
  • Wie Sie React Compiler installieren
  • Grundlegende Konfiguration für verschiedene Build-Tools
  • Wie Sie überprüfen, ob Ihr Setup funktioniert

Voraussetzungen

React Compiler ist für die optimale Zusammenarbeit mit React 19 ausgelegt, unterstützt aber auch React 17 und 18. Erfahren Sie mehr über dieKompatibilität mit React-Versionen.

Installation

Installieren Sie React Compiler alsdevDependency:

npm install -D babel-plugin-react-compiler@latest

Oder mit Yarn:

yarn add -D babel-plugin-react-compiler@latest

Oder mit pnpm:

pnpm install -D babel-plugin-react-compiler@latest

Grundlegende Einrichtung

React Compiler ist so konzipiert, dass er standardmäßig ohne Konfiguration funktioniert. Wenn Sie ihn jedoch unter besonderen Umständen konfigurieren müssen (z. B. um React-Versionen unter 19 anzusprechen), lesen Sie dieReferenz zu den Compiler-Optionen.

Der Einrichtungsprozess hängt von Ihrem Build-Tool ab. React Compiler enthält ein Babel-Plugin, das sich in Ihre Build-Pipeline integriert.

Fallstrick

React Compiler musszuerstin Ihrer Babel-Plugin-Pipeline ausgeführt werden. Der Compiler benötigt die ursprünglichen Quellinformationen für eine korrekte Analyse, daher muss er Ihren Code vor anderen Transformationen verarbeiten.

Babel

Erstellen oder aktualisieren Sie Ihrebabel.config.js:

Vite

Wenn Sie Vite verwenden, können Sie das Plugin zu vite-plugin-react hinzufügen:

Alternativ, wenn Sie ein separates Babel-Plugin für Vite bevorzugen:

npm install -D vite-plugin-babel

Next.js

Bitte lesen Sie diejs-Dokumentationfür weitere Informationen.

React Router

Installieren Sievite-plugin-babelund fügen Sie das Babel-Plugin des Compilers hinzu:

npm install vite-plugin-babel

Webpack

Ein Community-Webpack-Loader istjetzt hier verfügbar.

Expo

Bitte lesen Sie dieExpo-Dokumentation, um React Compiler in Expo-Apps zu aktivieren und zu verwenden.

Metro (React Native)

React Native verwendet Babel über Metro, daher lesen Sie den AbschnittVerwendung mit Babelfür Installationsanweisungen.

Rspack

Bitte lesen Sie dieRspack-Dokumentation, um React Compiler in Rspack-Apps zu aktivieren und zu verwenden.

Rsbuild

Bitte lesen Sie dieRsbuild-Dokumentation, um React Compiler in Rsbuild-Apps zu aktivieren und zu verwenden.

ESLint-Integration

React Compiler enthält eine ESLint-Regel, die dabei hilft, Code zu identifizieren, der nicht optimiert werden kann. Wenn die ESLint-Regel einen Fehler meldet, bedeutet dies, dass der Compiler die Optimierung dieser spezifischen Komponente oder dieses Hooks überspringt. Dies ist sicher: Der Compiler wird weiterhin andere Teile Ihrer Codebasis optimieren. Sie müssen nicht alle Verstöße sofort beheben. Beheben Sie sie in Ihrem eigenen Tempo, um schrittweise die Anzahl der optimierten Komponenten zu erhöhen.

Installieren Sie das ESLint-Plugin:

npm install -D eslint-plugin-react-hooks@latest

Wenn Sie eslint-plugin-react-hooks noch nicht konfiguriert haben, folgen Sie denInstallationsanweisungen in der Readme. Die Compiler-Regeln sind im Presetrecommended-latestverfügbar.

Die ESLint-Regel wird:

  • Verstöße gegen dieRegeln von React
  • Anzeigen, welche Komponenten nicht optimiert werden können
  • Hilfreiche Fehlermeldungen zur Behebung von Problemen bereitstellen

Überprüfen Sie Ihr Setup

Überprüfen Sie nach der Installation, ob der React Compiler korrekt funktioniert.

Überprüfen Sie die React DevTools

Komponenten, die vom React Compiler optimiert wurden, zeigen in den React DevTools ein „Memo ✨“-Abzeichen:

  1. Installieren Sie dieReact Developer Tools-Browsererweiterung
  2. Öffnen Sie Ihre App im Entwicklungsmodus
  3. Öffnen Sie die React DevTools
  4. Suchen Sie nach dem ✨-Emoji neben den Komponentennamen

Wenn der Compiler funktioniert:

  • Komponenten zeigen ein „Memo ✨“-Abzeichen in den React DevTools
  • Aufwändige Berechnungen werden automatisch memoisiert
  • Kein manuellesuseMemoerforderlich

Überprüfen Sie die Build-Ausgabe

Sie können auch überprüfen, ob der Compiler läuft, indem Sie Ihre Build-Ausgabe prüfen. Der kompilierte Code enthält automatische Memoisierungslogik, die der Compiler automatisch hinzufügt.

Fehlerbehebung

Ausschluss bestimmter Komponenten

Wenn eine Komponente nach der Kompilierung Probleme verursacht, können Sie sie vorübergehend mit der"use no memo"-Direktive ausschließen:

Dies weist den Compiler an, die Optimierung für diese spezifische Komponente zu überspringen. Sie sollten das zugrundeliegende Problem beheben und die Direktive nach der Lösung entfernen.

Weitere Hilfe zur Fehlerbehebung finden Sie imDebugging-Leitfaden.

Nächste Schritte

Nachdem Sie den React Compiler installiert haben, erfahren Sie mehr über:

上一篇Einführung下一篇Inkrementelle Einführung