Debugging und Fehlerbehebung

Dieser Leitfaden hilft Ihnen, Probleme bei der Verwendung des React Compilers zu identifizieren und zu beheben. Erfahren Sie, wie Sie Kompilierungsprobleme debuggen und häufige Probleme lösen.

Verstehen des Compiler-Verhaltens

Der React Compiler ist darauf ausgelegt, Code zu verarbeiten, der denRegeln von Reactfolgt. Wenn er auf Code stößt, der diese Regeln möglicherweise verletzt, überspringt er die Optimierung sicherheitshalber, anstatt das Verhalten Ihrer App zu riskieren.

Compiler-Fehler vs. Laufzeitprobleme

Compiler-Fehlertreten zur Build-Zeit auf und verhindern, dass Ihr Code kompiliert wird. Diese sind selten, da der Compiler so konzipiert ist, dass er problematischen Code überspringt, anstatt fehlzuschlagen.

Laufzeitproblemetreten auf, wenn kompilierter Code sich anders verhält als erwartet. Meistens, wenn Sie auf ein Problem mit dem React Compiler stoßen, handelt es sich um ein Laufzeitproblem. Dies geschieht typischerweise, wenn Ihr Code die Regeln von React auf subtile Weise verletzt, die der Compiler nicht erkennen konnte, und der Compiler fälschlicherweise eine Komponente kompiliert hat, die er hätte überspringen sollen.

Konzentrieren Sie sich beim Debuggen von Laufzeitproblemen darauf, Verstöße gegen die Regeln von React in den betroffenen Komponenten zu finden, die von der ESLint-Regel nicht erkannt wurden. Der Compiler verlässt sich darauf, dass Ihr Code diesen Regeln folgt, und wenn sie auf für ihn nicht erkennbare Weise gebrochen werden, treten Laufzeitprobleme auf.

Häufige problematische Muster

Eine der Hauptarten, wie der React Compiler Ihre App beschädigen kann, ist, wenn Ihr Code so geschrieben wurde, dass er für seine Korrektheit auf Memoisierung angewiesen ist. Das bedeutet, dass Ihre App davon abhängt, dass bestimmte Werte memoisiert werden, um richtig zu funktionieren. Da der Compiler möglicherweise anders memoisiert als Ihr manueller Ansatz, kann dies zu unerwartetem Verhalten wie übermäßig ausgelösten Effekten, Endlosschleifen oder fehlenden Updates führen.

Häufige Szenarien, in denen dies auftritt:

• Effekte, die auf referenzieller Gleichheit basieren– Wenn Effekte davon abhängen, dass Objekte oder Arrays über mehrere Renderzyklen hinweg dieselbe Referenz behalten
• Abhängigkeits-Arrays, die stabile Referenzen benötigen– Wenn instabile Abhängigkeiten dazu führen, dass Effekte zu oft ausgelöst werden oder Endlosschleifen erzeugen
• Bedingte Logik basierend auf Referenzprüfungen– Wenn Code referenzielle Gleichheitsprüfungen für Caching oder Optimierung verwendet

Debugging-Arbeitsablauf

Befolgen Sie diese Schritte, wenn Sie auf Probleme stoßen:

Compiler-Build-Fehler

Wenn Sie auf einen Compiler-Fehler stoßen, der Ihren Build unerwartet abbricht, handelt es sich wahrscheinlich um einen Fehler im Compiler. Melden Sie ihn im Repositoryfacebook/react mit:

• Der Fehlermeldung
• Dem Code, der den Fehler verursacht hat
• Ihren React- und Compiler-Versionen

Laufzeitprobleme

Für Probleme mit dem Laufzeitverhalten:

1. Kompilierung vorübergehend deaktivieren

Verwenden Sie"use no memo", um zu isolieren, ob ein Problem compilerbezogen ist:

Wenn das Problem verschwindet, hängt es wahrscheinlich mit einem Verstoß gegen die Regeln von React zusammen.

Sie können auch versuchen, manuelle Memoisierung (useMemo, useCallback, memo) aus der problematischen Komponente zu entfernen, um zu überprüfen, ob Ihre App ohne jegliche Memoisierung korrekt funktioniert. Wenn der Fehler weiterhin auftritt, nachdem alle Memoisierung entfernt wurde, haben Sie einen Verstoß gegen die Regeln von React, der behoben werden muss.

2. Probleme schrittweise beheben

1. Identifizieren Sie die Ursache (oft Memoisierung für Korrektheit)
2. Testen Sie nach jeder Korrektur
3. Entfernen Sie"use no memo", sobald das Problem behoben ist
4. Stellen Sie sicher, dass die Komponente das ✨-Abzeichen in den React DevTools anzeigt

Melden von Compiler-Fehlern

Wenn Sie glauben, einen Compiler-Fehler gefunden zu haben:

1. Überprüfen Sie, ob es kein Verstoß gegen die React-Regeln ist- Prüfen Sie mit ESLint
2. Erstellen Sie eine minimale Reproduktion- Isolieren Sie das Problem in einem kleinen Beispiel
3. Testen Sie ohne den Compiler- Bestätigen Sie, dass das Problem nur bei Kompilierung auftritt
4. Melden Sie einIssue:
   • React- und Compiler-Versionen
   • Minimaler Reproduktionscode
   • Erwartetes vs. tatsächliches Verhalten
   • Eventuelle Fehlermeldungen

Nächste Schritte

• Lesen Sie dieReact-Regeln, um Probleme zu vermeiden
• Sehen Sie sich denLeitfaden zur schrittweisen Einführungfür Strategien zur schrittweisen Einführung an