Fast Refresh

Fast Refresh ist eine Next.js-Funktion, die Ihnen sofortiges Feedback zu Änderungen an Ihren React-Komponenten bietet. Fast Refresh 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, ohne den Komponenten- zustand zu verlieren.

Funktionsweise

Wenn Sie eine Datei bearbeiten, die nur React-Komponenten exportiert, aktualisiert Fast Refresh nur den Code dieser Datei und rendert Ihre Komponente neu. Sie können alles in dieser Datei bearbeiten, einschließlich Stile, Render-Logik, Event-Handler oder Effekte.
Wenn Sie eine Datei mit Exporten bearbeiten, die keine React-Komponenten sind, führt Fast Refresh sowohl diese Datei als auch die Dateien, die sie importieren, erneut aus. Wenn also sowohl Button.js als auch Modal.js theme.js importieren, aktualisiert die Bearbeitung von theme.js beide Komponenten.
Falls Sie eine Datei bearbeiten, die von Dateien außerhalb des React-Baums importiert wird, führt Fast Refresh einen vollständigen Neulad durch. Möglicherweise haben Sie eine Datei, die eine React-Komponente rendert, aber auch einen Wert exportiert, der von einer nicht-React-Komponente importiert wird. Beispielsweise könnte Ihre Komponente auch eine Konstante exportieren, die von einer nicht-React-Hilfsdatei importiert wird. In diesem Fall sollten Sie erwägen, die Konstante in eine separate Datei auszulagern und sie in beide Dateien zu importieren. Dadurch wird Fast Refresh wieder aktiviert. Andere Fälle können normalerweise auf ähnliche Weise gelöst werden.

Fehlerresistenz

Syntaxfehler

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

Laufzeitfehler

Wenn Sie einen Fehler machen, der zu einem Laufzeitfehler in Ihrer Komponente führt, wird Ihnen ein kontextuelles Overlay angezeigt. Die Behebung des Fehlers schließt das Overlay automatisch, ohne die App neu zu laden.

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

Wenn Sie Error Boundaries in Ihrer App haben (was für eine elegante Fehlerbehandlung in der Produktion empfehlenswert ist), wird das Rendering nach einem Renderfehler beim nächsten Bearbeitungsversuch erneut versucht. Das bedeutet, dass eine Error Boundary verhindern kann, dass Sie immer auf den Root-App-Zustand zurückgesetzt werden. Allerdings sollten Error Boundaries nicht zu granular sein. Sie werden von React in der Produktion verwendet und sollten immer gezielt eingesetzt werden.

Einschränkungen

Fast Refresh versucht, den lokalen React-Zustand in der 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 könnte:

Der lokale Zustand wird nicht für Klassenkomponenten erhalten (nur Funktionskomponenten und Hooks behalten den Zustand bei).
Die bearbeitete Datei könnte andere Exporte zusätzlich zu einer React-Komponente enthalten.
Manchmal exportiert eine Datei das Ergebnis eines Higher-Order Components 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 erhält. Für große Codebasen können Sie unseren name-default-component-Codemod verwenden.

Je mehr Ihr Codebasis auf Funktionskomponenten und Hooks umstellt, desto häufiger wird der Zustand erhalten bleiben.

Tipps

Fast Refresh erhält standardmäßig den lokalen React-Zustand in Funktionskomponenten (und Hooks).
Manchmal möchten Sie den Zustand erzwingen, zurückgesetzt zu werden und eine Komponente neu zu mounten. Dies kann beispielsweise nützlich sein, wenn Sie eine Animation anpassen, die nur beim Mounten auftritt. Dazu können Sie // @refresh reset an einer beliebigen Stelle in der bearbeiteten Datei hinzufügen. Diese Anweisung ist lokal für die Datei und weist Fast Refresh an, die Komponenten in dieser Datei bei jeder Bearbeitung neu zu mounten.
Sie können console.log oder debugger; in die Komponenten einfügen, die Sie während der Entwicklung bearbeiten.
Denken Sie daran, dass Importe case-sensitiv sind. Sowohl Fast als auch Full Refresh können 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 zu erhalten. Insbesondere behalten useState und useRef 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 Abhängigkeitsliste wird während Fast Refresh ignoriert.

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

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

Allerdings ist es eine gute Praxis, Code zu schreiben, der gelegentliche Neuausführungen von useEffect verkraftet, auch ohne Fast Refresh. Es erleichtert Ihnen das spätere Hinzufügen neuer Abhängigkeiten und wird durch React Strict Mode erzwungen, den wir dringend empfehlen zu aktivieren.