快速刷新

快速刷新是 React Native 的一項功能，可讓您針對 React 組件的變更獲得近乎即時的回饋。快速刷新預設為啟用，您可以在 React Native 開發人員選單中切換「啟用快速刷新」。啟用快速刷新後，大多數編輯應在一兩秒內可見。

運作方式

如果您編輯的模組僅匯出 React 組件，快速刷新將僅更新該模組的程式碼，並重新渲染您的組件。您可以編輯該檔案中的任何內容，包括樣式、渲染邏輯、事件處理程序或效果。
如果您編輯的模組匯出非 React 組件的內容，快速刷新將重新執行該模組以及匯入它的其他模組。因此，如果 Button.js 和 Modal.js 都匯入 Theme.js，則編輯 Theme.js 將更新這兩個組件。
最後，如果您編輯一個由 React 樹狀結構外部的模組匯入的檔案，快速刷新將回退到執行完整重新載入。您可能有一個檔案，它渲染一個 React 組件，但也匯出一個由非 React 組件匯入的值。例如，您的組件也可能匯出一個常數，而一個非 React 實用程式模組匯入它。在這種情況下，請考慮將常數遷移到一個單獨的檔案中，並將其匯入到這兩個檔案中。這將重新啟用快速刷新功能。其他情況通常可以通過類似的方式解決。

如果您在快速刷新會話期間犯了語法錯誤，您可以修復它並再次儲存檔案。紅框將消失。具有語法錯誤的模組將被阻止執行，因此您無需重新載入應用程式。

如果您在模組初始化期間犯了執行階段錯誤（例如，輸入 Style.create 而不是 StyleSheet.create），一旦您修復錯誤，快速刷新會話將繼續。紅框將消失，模組將被更新。

如果您犯了一個錯誤，導致組件內部發生執行階段錯誤，快速刷新會話也將在您修復錯誤後繼續。在這種情況下，React 將使用更新後的程式碼重新掛載您的應用程式。

如果您的應用程式中有錯誤邊界（這對於生產環境中的優雅失敗來說是個好主意），它們將在紅框後的下一次編輯時重試渲染。從這個意義上說，擁有錯誤邊界可以防止您始終被踢回根應用程式畫面。但是，請記住，錯誤邊界不應太細微。它們由 React 在生產環境中使用，並且應始終經過有意設計。

快速刷新嘗試保留您正在編輯的組件中的本機 React 狀態，但前提是這樣做是安全的。以下是一些您可能會看到每次編輯檔案時本機狀態都被重置的原因

本機狀態不會為類別組件保留（只有函式組件和 Hooks 會保留狀態）。
您正在編輯的模組除了 React 組件外，可能還有其他匯出。
有時，模組會匯出呼叫高階組件（如 createNavigationContainer(MyScreen)）的結果。如果返回的組件是一個類別，則狀態將被重置。

從長遠來看，隨著您的程式碼庫更多地轉向函式組件和 Hooks，您可以期望在更多情況下保留狀態。

快速刷新預設會保留函式組件（和 Hooks）中的 React 本機狀態。
有時您可能想要強制重置狀態，並重新掛載組件。例如，如果您正在調整僅在掛載時發生的動畫，這可能會很方便。為此，您可以在您正在編輯的檔案中的任何位置新增 // @refresh reset。此指令是檔案本地的，並指示快速刷新在每次編輯時重新掛載在該檔案中定義的組件。

在可能的情況下，快速刷新會嘗試在編輯之間保留組件的狀態。特別是，useState 和 useRef 會保留其先前的值，只要您不更改其引數或 Hook 呼叫的順序。

具有依賴項的 Hooks（例如 useEffect、useMemo 和 useCallback）將在快速刷新期間始終更新。它們的依賴項列表將在快速刷新發生時被忽略。

例如，當您將 useMemo(() => x * 2, [x]) 編輯為 useMemo(() => x * 10, [x]) 時，即使 x（依賴項）沒有更改，它也會重新執行。如果 React 不這樣做，您的編輯將不會反映在螢幕上！

有時，這可能會導致意想不到的結果。例如，即使是具有空依賴項陣列的 useEffect 仍然會在快速刷新期間重新執行一次。但是，即使沒有快速刷新，編寫能夠適應 useEffect 偶爾重新執行的程式碼也是一個好習慣。這使您以後可以更輕鬆地向其引入新的依賴項。