Was ist ein React-Compiler?

Der React-Compiler ist ein neuer experimenteller Compiler, der verspricht, die Art und Weise, wie React-Anwendungen für die Leistung optimiert werden, zu revolutionieren.

Sie können diesen Artikel im Podcast-Format unter diesem kostenlosen Medium-Link lesen und anhören.

Was ist ein Compiler?

Kurz gesagt ist ein Compiler ein Programm, das eine Programmiersprache (die Quellsprache) in eine andere (die Zielsprache) übersetzt.

Ein Compiler übersetzt eine Quellsprache in eine Zielsprache

Zum Beispiel werden JSX und TSX in JavaScript kompiliert (mit Babel oder anderen), damit der Browser den Code versteht.

Warum ein neuer React-Compiler?

Einer der Hauptgründe, die ich gehört habe, ist die Leistungsoptimierung.

Manchmal kommt es bei React-Anwendungen zu unnötigen erneuten Renderings, was zu Leistungsproblemen führt.
Entwickler können den Code durch Auswendiglernen, Rückrufe und dergleichen optimieren. Aber oft führt dies zu einer überladenen Komponente voller Memoisierungsaufrufe.

Was ist die React Compiler-Lösung?

Kurz gesagt sollte der React Compiler Ihren Code automatisch optimieren und so den Bedarf an manueller Leistungsoptimierung reduzieren.

Infolgedessen sollte der React Compiler die Reaktionsfähigkeit der App verbessern.

Lassen Sie uns darauf eingehen.

Was ist ein React-Compiler?

Der React-Compiler ist ein experimenteller Compiler, der bereits in React 18 verfügbar ist. Er ist und wird höchstwahrscheinlich auch in React 19 ein optionales Tool sein.

Die Verwendung des React Compiler in React 18 erfordert einige manuelle Konfiguration, aber Sie können es bereits ausprobieren.

Der React Compiler ist so konzipiert, dass er im Ökosystem von React 19 funktioniert

Installieren Sie den React Compiler

Während React Compiler in der Produktion bei Instagram verwendet wird, ist er als Open-Source-Beta verfügbar und auf React 17 verfügbar.

Der Compiler wird mit einem dringend empfohlenen eslint-Plugin geliefert, das die Compiler-Analyse im Editor anzeigt.

Sie können das eslint-Plugin auch dann verwenden, wenn Sie React Compiler nicht verwenden.

Reagieren Sie auf den Compiler-Gesundheitscheck

Vor der Installation von React Compiler wird empfohlen, die Kompatibilität zu überprüfen.

Führen Sie den folgenden Befehl aus:

npx react-compiler-healthcheck@beta

um ein Ergebnis wie unten zu erhalten:

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

Eine höhere Anzahl kompilierter Komponenten ist eine gute Sache. Das ist die Anzahl der Komponenten, die erfolgreich optimiert werden können.

Mein StrictMode ist nicht aktiviert, aber wenn dies aktiviert und befolgt wird, ist die Wahrscheinlichkeit höher, dass die Reaktionsregeln befolgt werden.
Daher sollten wir es wahrscheinlich aktiviert lassen.

Abschließend prüft React-Compiler-Healthcheck nach bekannten Bibliotheken, die mit dem Compiler nicht kompatibel sind. Ich habe keine, aber MobX wird Ihnen Probleme bereiten. Es wird nicht funktionieren.

React Compiler installieren

Installieren Sie den React Compiler mit npm:

npx react-compiler-healthcheck@beta

Oder, wenn Sie Garn verwenden:

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

Sie sollten auch das eslint-Plugin zur Konfiguration hinzufügen. In meinem Fall handelt es sich um eine .eslintrc.js-Datei.

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

Sobald das eslint-Plugin korrekt eingerichtet ist, erhalten Sie möglicherweise Warnungen zu den React-Regeln. Sie können sie vor Ort oder später aktualisieren.

Der einzige Unterschied besteht darin, dass React im zweiten Fall die Optimierung dieser Komponente oder dieses Hooks übersprungen hat.

Sie können diesen Artikel im Podcast-Format unter diesem kostenlosen Medium-Link lesen und anhören.

Das obige ist der detaillierte Inhalt vonWas ist ein React-Compiler?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!