快速重新整理
快速重新整理是整合到 Next.js 中的 React 功能，可讓您在儲存檔案變更時，維持暫時的客戶端狀態並即時重新載入瀏覽器頁面。在 9.4 或更新版本 的所有 Next.js 應用程式中，預設都會啟用此功能。啟用快速重新整理後，大部分的編輯內容都應在幾秒鐘內顯示。
運作方式
- 如果您編輯的檔案**僅匯出 React 元件**，快速重新整理將只會更新該檔案的程式碼，並重新渲染您的元件。您可以編輯該檔案中的任何內容，包括樣式、渲染邏輯、事件處理器或副作用。
- 如果您編輯的檔案匯出了*非* React 元件的內容，快速重新整理將會重新執行該檔案以及所有匯入它的檔案。因此，如果
Button.js和Modal.js都匯入了theme.js，那麼編輯theme.js將會更新這兩個元件。 - 最後，如果您**編輯的檔案被 React 樹狀結構之外的檔案匯入**，快速重新整理將**會退回到執行完整重新載入**。您可能有一個渲染 React 元件但也匯出被**非 React 元件**匯入的值的檔案。例如，您的元件可能也匯出了一個常數，並且一個非 React 工具程式檔案匯入了它。在這種情況下，請考慮將該常數移至一個單獨的檔案，並將其匯入到兩個檔案中。這將重新啟用快速重新整理的功能。其他情況通常可以用類似的方式解決。
錯誤容錯
語法錯誤
如果您在開發過程中發生語法錯誤，您可以修復它並再次儲存檔案。錯誤將會自動消失，因此您不需要重新載入應用程式。**您不會遺失元件狀態**。
執行階段錯誤
如果您的錯誤導致元件內部發生執行階段錯誤，您將會看到一個帶有上下文資訊的覆蓋層。修復錯誤將會自動關閉覆蓋層，而無需重新載入應用程式。
如果錯誤並非在渲染期間發生，元件狀態將會被保留。如果錯誤是在渲染期間發生的，React 將使用更新後的程式碼重新掛載您的應用程式。
如果您的應用程式中有錯誤邊界（這對於在正式環境中優雅地處理錯誤是一個好方法），它們會在渲染錯誤後的下一次編輯時重試渲染。這表示設定錯誤邊界可以避免您總是回到應用程式的根狀態。但是，請記住，錯誤邊界不應該設定得*太*細緻。它們會在 React 正式環境中使用，並且應該始終經過精心設計。
限制
快速重新整理 (Fast Refresh) 會嘗試保留您正在編輯的元件中的本地 React 狀態，但前提是這樣做是安全的。以下是一些您可能會看到每次編輯檔案時本地狀態都被重置的原因：
- 類別元件的本地狀態不會被保留（只有函式元件和 Hooks 會保留狀態）。
- 您正在編輯的檔案除了 React 元件之外，可能還有其他匯出。
- 有時，檔案會匯出呼叫高階元件（例如
HOC(WrappedComponent)）的結果。如果返回的元件是類別元件，則其狀態將被重置。 - 像
export default () => <div />;這樣的匿名箭頭函式會導致快速重新整理無法保留本地元件狀態。對於大型程式碼庫，您可以使用我們的name-default-componentcodemod。
隨著您的程式碼庫更多地轉移到函式元件和 Hooks，您可以預期在更多情況下狀態會被保留。
技巧
如果可能，快速重新整理會嘗試在編輯之間保留元件的狀態。特別是，只要您不更改它們的參數或 Hook 呼叫的順序，useState 和 useRef 就會保留它們先前的值。
具有依賴項的 Hooks（例如 useEffect、useMemo 和 useCallback）在快速重新整理期間將始終更新。在快速重新整理期間，它們的依賴項列表將被忽略。
例如，當您將 useMemo(() => x * 2, [x]) 編輯為 useMemo(() => x * 10, [x]) 時，即使 x（依賴項）沒有更改，它也會重新執行。如果 React 不這樣做，您的編輯將不會反映在螢幕上！
有時，這可能會導致意外的結果。例如，即使具有空依賴項陣列的 useEffect 在快速重新整理期間仍會重新執行一次。
然而，即使沒有快速重新整理 (Fast Refresh)，編寫能夠應對偶爾重新執行 useEffect 的程式碼仍是良好實務。這將使您日後更容易引入新的依賴項，並且React 嚴格模式 (React Strict Mode)也會強制執行此操作，我們強烈建議您啟用它。
這有幫助嗎？