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.
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.
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.
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.
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
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.
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.
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!
