Menu

Fast Refresh

Fast Refresh ist eine in Next.js integrierte React-Funktion, die es Ihnen ermöglicht, die Browserseite neu zu laden und dabei den temporären clientseitigen Zustand beizubehalten, wenn Sie Änderungen an einer Datei speichern. Es ist standardmäßig in allen Next.js-Anwendungen ab Version 9.4 oder neuer aktiviert. Mit aktiviertem Fast Refresh sollten die meisten Änderungen innerhalb einer Sekunde sichtbar sein.

Wie es funktioniert

  • Wenn Sie eine Datei bearbeiten, die nur React-Komponente(n) exportiert, wird Fast Refresh den Code nur für diese Datei aktualisieren und Ihre Komponente neu rendern. Sie können alles in dieser Datei bearbeiten, einschließlich Stilen, Rendering-Logik, Ereignishandlern oder Effekten.
  • Wenn Sie eine Datei mit Exporten bearbeiten, die keine React-Komponenten sind, wird Fast Refresh sowohl diese Datei als auch die anderen Dateien, die sie importieren, neu ausführen. Wenn also sowohl Button.js als auch Modal.js theme.js importieren, wird die Bearbeitung von theme.js beide Komponenten aktualisieren.
  • Wenn Sie abschließend eine Datei bearbeiten, die von Dateien außerhalb des React-Baums importiert wird, wird Fast Refresh auf einen vollständigen Neustart zurückgreifen. Es kann sein, dass Sie eine Datei haben, die eine React-Komponente rendert, aber auch einen Wert exportiert, der von einer Nicht-React-Komponente importiert wird. Zum Beispiel exportiert Ihre Komponente möglicherweise eine Konstante, die von einer Nicht-React-Hilfsdatei importiert wird. In diesem Fall sollten Sie die Konstante in eine separate Datei auslagern und in beide Dateien importieren. Dadurch wird Fast Refresh wieder aktiviert. Andere Fälle lassen sich in der Regel ähnlich lösen.

Fehlerresilienz

Syntaxfehler

Wenn Sie während der Entwicklung einen Syntaxfehler machen, können Sie ihn korrigieren und die Datei erneut speichern. Der Fehler verschwindet automatisch, sodass Sie die Anwendung nicht neu laden müssen. Der Komponentenzustand bleibt erhalten.

Laufzeitfehler

Wenn Sie einen Fehler machen, der zu einem Laufzeitfehler in Ihrer Komponente führt, erhalten Sie eine kontextbezogene Überlagerung. Das Beheben des Fehlers wird die Überlagerung automatisch schließen, ohne die Anwendung neu zu laden.

Der Komponentenzustand bleibt erhalten, wenn der Fehler nicht während des Renderns auftrat. Wenn der Fehler während des Renderns auftrat, wird React Ihre Anwendung mit dem aktualisierten Code neu mounten.

Wenn Sie Fehlergrenzen in Ihrer App haben (was für graziöse Fehler in der Produktion eine gute Idee ist), werden sie nach einem Rendering-Fehler bei der nächsten Bearbeitung erneut rendern. Das bedeutet, dass eine Fehlergrenze verhindern kann, dass Sie immer zum Root-App-Zustand zurückgesetzt werden. Beachten Sie jedoch, dass Fehlergrenzen nicht zu granular sein sollten. Sie werden von React in der Produktion verwendet und sollten immer absichtlich gestaltet werden.

Einschränkungen

Fast Refresh versucht, den lokalen React-Zustand in der von Ihnen bearbeiteten Komponente zu erhalten, aber nur, wenn dies sicher ist. Hier sind einige Gründe, warum der lokale Zustand bei jeder Bearbeitung einer Datei zurückgesetzt werden kann:

  • Der lokale Zustand wird für Klassenkomponenten nicht beibehalten (nur Funktionskomponenten und Hooks erhalten den Zustand).
  • Die von Ihnen bearbeitete Datei kann andere Exporte zusätzlich zu einer React-Komponente haben.
  • Manchmal exportiert eine Datei das Ergebnis des Aufrufs einer Higher-Order-Komponente wie HOC(WrappedComponent). Wenn die zurückgegebene Komponente eine Klasse ist, wird ihr Zustand zurückgesetzt.
  • Anonyme Pfeilfunktionen wie export default () => <div />; führen dazu, dass Fast Refresh den lokalen Komponentenzustand nicht beibehält. Für große Codebasen können Sie unsere name-default-component Codemod verwenden.

Je mehr Ihr Codebase zu Funktionskomponenten und Hooks migriert, desto mehr Zustände können erhalten bleiben.

Tipps

  • Fast Refresh erhält den lokalen React-Zustand in Funktionskomponenten (und Hooks) standardmäßig.
  • Manchmal möchten Sie den Zustand zwangsweise zurücksetzen und eine Komponente neu mounten. Dies kann beispielsweise nützlich sein, wenn Sie eine Animation optimieren, die nur beim Mounten auftritt. Um dies zu tun, können Sie // @refresh reset an beliebiger Stelle in der bearbeiteten Datei hinzufügen. Diese Anweisung ist lokal für die Datei und weist Fast Refresh an, Komponenten in dieser Datei bei jeder Bearbeitung neu zu mounten.
  • Sie können console.log oder debugger; in die bearbeiteten Komponenten während der Entwicklung einfügen.
  • Denken Sie daran, dass Imports die Groß-/Kleinschreibung beachten. Sowohl schnelles als auch vollständiges Refresh kann fehlschlagen, wenn Ihr Import nicht mit dem tatsächlichen Dateinamen übereinstimmt. Zum Beispiel './header' vs './Header'.

Fast Refresh und Hooks

Wenn möglich, versucht Fast Refresh, den Zustand Ihrer Komponente zwischen Bearbeitungen beizubehalten. Insbesondere useState und useRef behalten ihre vorherigen Werte bei, solange Sie ihre Argumente oder die Reihenfolge der Hook-Aufrufe nicht ändern.

Hooks mit Abhängigkeiten – wie useEffect, useMemo und useCallback – werden während Fast Refresh immer aktualisiert. Ihre Liste der Abhängigkeiten wird während Fast Refresh ignoriert.

Wenn Sie beispielsweise useMemo(() => x * 2, [x]) zu useMemo(() => x * 10, [x]) bearbeiten, wird es erneut ausgeführt, auch wenn sich x (die Abhängigkeit) nicht geändert hat. Wenn React das nicht täte, würde Ihre Bearbeitung nicht auf dem Bildschirm erscheinen!

Dies kann manchmal zu unerwarteten Ergebnissen führen. Beispielsweise würde selbst ein useEffect mit einem leeren Abhängigkeitsarray während Fast Refresh einmal erneut ausgeführt werden.

Das Schreiben von Code, der gelegentlichem erneuten Ausführen von useEffect standhält, ist jedoch auch ohne Fast Refresh eine gute Praxis. Es erleichtert Ihnen das spätere Hinzufügen neuer Abhängigkeiten und wird durch React Strict Mode erzwungen, was wir dringend empfehlen zu aktivieren.