Fast Refresh

Beispiele

Fast Refresh Demo

Fast Refresh ist eine Next.js-Funktion, die Ihnen sofortiges Feedback bei Ä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 Komponentenstatus 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, Renderlogik, 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 exportiert Ihre Komponente vielleicht eine Konstante, die von einer nicht-React-Hilfsdatei importiert wird. In diesem Fall sollten Sie erwägen, die Konstante in eine separate Datei auszulagern und von beiden 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 Komponentenstatus geht nicht verloren.

Laufzeitfehler

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

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

Wenn Sie Error Boundaries in Ihrer App haben (was für eine saubere Fehlerbehandlung in der Produktion empfehlenswert ist), wird beim nächsten Bearbeiten nach einem Renderfehler ein erneuter Render-Versuch unternommen. Das bedeutet, dass Error Boundaries verhindern können, dass Sie immer auf den Root-App-Status zurückgesetzt werden. Allerdings sollten Error Boundaries nicht zu granular sein. Sie werden von React in der Produktion verwendet und sollten immer bewusst gestaltet werden.

Einschränkungen

Fast Refresh versucht, den lokalen React-Status in der bearbeiteten Komponente zu erhalten, aber nur wenn dies sicher möglich ist. Hier sind einige Gründe, warum der lokale Status bei jeder Bearbeitung einer Datei zurückgesetzt werden könnte:

Der lokale Status wird bei Klassenkomponenten nicht erhalten (nur Funktionskomponenten und Hooks behalten den Status).
Die bearbeitete Datei könnte neben einer React-Komponente auch andere Exporte enthalten.
Manchmal exportiert eine Datei das Ergebnis eines Higher-Order Components wie HOC(WrappedComponent). Wenn die zurückgegebene Komponente eine Klasse ist, wird ihr Status zurückgesetzt.
Anonyme Pfeilfunktionen wie export default () => <div />; führen dazu, dass Fast Refresh den lokalen Komponentenstatus nicht erhält. Für größere Codebasen können Sie unseren name-default-component Codemod verwenden.

Je mehr Ihre Codebasis auf Funktionskomponenten und Hooks umgestellt wird, desto häufiger wird der Status erhalten bleiben.

Tipps

Fast Refresh erhält standardmäßig den lokalen React-Status in Funktionskomponenten (und Hooks).
Manchmal möchten Sie den Status 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 auf die Datei beschränkt und weist Fast Refresh an, die in dieser Datei definierten Komponenten 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. Beispiel: './header' vs './Header'.

Fast Refresh und Hooks

Wenn möglich, versucht Fast Refresh, den Status 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.

Beispiel: Wenn Sie 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 das Schreiben von Code, der gelegentliches erneutes Ausführen von useEffect verkraftet, eine gute Praxis, 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.