v19.2Latest

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.

Deep Dive
Welche Art von Memoisierung fügt der React Compiler hinzu?

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.

Zusätzliche Ressourcen

Zusätzlich zu dieser Dokumentation empfehlen wir, dieReact Compiler Working Groupfür weitere Informationen und Diskussionen über den Compiler zu besuchen.

上一篇React-Compiler下一篇Installation