Einführung
React Compiler ist ein neues Build-Time-Tool, das Ihre React-App automatisch optimiert. Es funktioniert mit einfachem JavaScript und versteht dieRegeln von React, sodass Sie keinen Code umschreiben müssen, um es zu verwenden.
Sie werden lernen
- Was der React Compiler tut
- Erste Schritte mit dem Compiler
- Strategien für inkrementelle Einführung
- Debugging und Fehlerbehebung bei Problemen
- Verwendung des Compilers für Ihre React-Bibliothek
Was macht der React Compiler?
React Compiler optimiert Ihre React-Anwendung automatisch zur Build-Zeit. React ist oft schnell genug ohne Optimierung, aber manchmal müssen Sie Komponenten und Werte manuell memoisieren, um Ihre App reaktionsschnell zu halten. Diese manuelle Memoisierung ist mühsam, fehleranfällig und fügt zusätzlichen Wartungscode hinzu. React Compiler übernimmt diese Optimierung automatisch für Sie und befreit Sie von dieser mentalen Belastung, sodass Sie sich auf das Entwickeln von Funktionen konzentrieren können.
Vor React Compiler
Ohne den Compiler müssen Sie Komponenten und Werte manuell memoisieren, um Re-Renderings zu optimieren:
Hinweis
Diese manuelle Memoisierung hat einen subtilen Fehler, der die Memoisierung zerstört:
ObwohlhandleClick in useCallbackgewrappt ist, erstellt die Pfeilfunktion() => handleClick(item)jedes Mal, wenn die Komponente rendert, eine neue Funktion. Das bedeutet, dassItemimmer eine neueonClick-Prop erhält, was die Memoisierung zerstört.
React Compiler kann dies korrekt optimieren, mit oder ohne die Pfeilfunktion, und stellt sicher, dassItemnur neu gerendert wird, wenn sichprops.onClickändert.
Nach React Compiler
Mit React Compiler schreiben Sie denselben Code ohne manuelle Memoisierung:
Sehen Sie dieses Beispiel im React Compiler Playground
React Compiler wendet automatisch die optimale Memoisierung an und stellt sicher, dass Ihre App nur bei Bedarf neu gerendert wird.
Sollte ich den Compiler ausprobieren?
Wir ermutigen alle, den React Compiler zu verwenden. Während der Compiler heute noch eine optionale Ergänzung zu React ist, könnten in Zukunft einige Funktionen den Compiler benötigen, um vollständig zu funktionieren.
Ist es sicher, ihn zu verwenden?
Der React Compiler ist jetzt stabil und wurde umfassend in der Produktion getestet. Obwohl er in der Produktion bei Unternehmen wie Meta verwendet wird, hängt die Einführung des Compilers in der Produktion für Ihre App von der Gesundheit Ihres Codebase und davon ab, wie gut Sie dieRegeln von Reactbefolgt haben.
Welche Build-Tools werden unterstützt?
Der React Compiler kann übermehrere Build-Toolswie Babel, Vite, Metro und Rsbuild installiert werden.
Der React Compiler ist hauptsächlich ein leichtes Babel-Plugin-Wrapper um den Kern-Compiler, der so entworfen wurde, dass er von Babel selbst entkoppelt ist. Während die erste stabile Version des Compilers hauptsächlich ein Babel-Plugin bleiben wird, arbeiten wir mit den swc- undoxc-Teams zusammen, um erstklassige Unterstützung für den React Compiler zu schaffen, sodass Sie Babel in Zukunft nicht wieder zu Ihren Build-Pipelines hinzufügen müssen.
js-Benutzer können den swc-invoked React Compiler aktivieren, indem siev15.3.1oder höher verwenden.
Was soll ich mit useMemo, useCallback und React.memo tun?
Standardmäßig wird der React Compiler Ihren Code basierend auf seiner Analyse und Heuristik memoisieren. In den meisten Fällen wird diese Memoisierung genauso präzise oder präziser sein als das, was Sie möglicherweise geschrieben haben.
In einigen Fällen benötigen Entwickler jedoch möglicherweise mehr Kontrolle über die Memoisierung. Die HooksuseMemounduseCallbackkönnen weiterhin mit dem React Compiler als Ausstiegsklausel verwendet werden, um zu steuern, welche Werte memoisiert werden. Ein häufiger Anwendungsfall dafür ist, wenn ein memoisierter Wert als Effektabhängigkeit verwendet wird, um sicherzustellen, dass ein Effekt nicht wiederholt ausgelöst wird, selbst wenn sich seine Abhängigkeiten nicht wesentlich ändern.
Für neuen Code empfehlen wir, sich für die Memoisierung auf den Compiler zu verlassen unduseMemo/useCallbackdort zu verwenden, wo eine präzise Kontrolle erforderlich ist.
Für bestehenden Code empfehlen wir, entweder die vorhandene Memoisierung beizubehalten (ihre Entfernung kann die Kompilierungsausgabe ändern) oder vor dem Entfernen der Memoisierung sorgfältig zu testen.
Probieren Sie den React Compiler aus
Dieser Abschnitt hilft Ihnen, mit dem React Compiler zu beginnen und zu verstehen, wie Sie ihn effektiv in Ihren Projekten einsetzen können.
- Installation- Installieren Sie den React Compiler und konfigurieren Sie ihn für Ihre Build-Tools
- React-Version-Kompatibilität- Unterstützung für React 17, 18 und 19
- Konfiguration- Passen Sie den Compiler an Ihre spezifischen Anforderungen an
- Inkrementelle Einführung- Strategien für die schrittweise Einführung des Compilers in bestehenden Codebasen
- Debugging und Fehlerbehebung- Identifizieren und beheben Sie Probleme bei der Verwendung des Compilers
- Kompilieren von Bibliotheken- Best Practices für das Ausliefern von kompiliertem Code
- API-Referenz- Detaillierte Dokumentation aller Konfigurationsoptionen
Zusätzliche Ressourcen
Zusätzlich zu dieser Dokumentation empfehlen wir, dieReact Compiler Working Groupfür weitere Informationen und Diskussionen über den Compiler zu besuchen.