React 的 Strict Mode（嚴格模式）是一種用于檢測應用中潛在問題的開發工具。它不會渲染任何可見的 UI 元素，而是通過激活額外的檢查和警告來輔助開發。Strict Mode 主要在開發模式下工作，不會影響生產環境的構建。

通過 Vite 腳手架創建的 React 項目默認已經設置了嚴格模式。

有什么優劣

優點：

• 早期問題發現: 通過在開發初期就揭示潛在問題，如異步邊界、過時 API 使用等，有助于快速迭代和修復，減少后期維護成本。
• 提升代碼質量: 強制執行 React 推薦的編程習慣，促進代碼的一致性和可維護性。
• 輔助調試: 在開發階段揭示可能在生產環境中難以復現的問題。
• 兼容性準備: 引導開發者避免即將廢棄的功能，確保應用未來與 React 新版本的兼容性。

缺點：

• 性能影響: 雖然只在開發模式下，額外的檢查可能會略微增加開發環境的運行時間。
• 誤解風險: 開發者可能錯誤地認為 Strict Mode 能替代全面的測試，導致過度依賴而忽視了其他重要的測試環節。

使用場景

• 新項目開發: 對于新創建的 React 應用，推薦全局啟用 Strict Mode 以從一開始就確保代碼質量。
• 現有項目升級: 在升級 React 版本時，局部或逐步引入 Strict Mode 可以幫助識別并修正與新版本不兼容的代碼。
• 組件庫測試: 開發 React 組件庫時，使用 Strict Mode 可以確保提供的組件符合最佳實踐，減少使用者遇到問題的可能性。

如何使用

為整個應用啟用嚴格模式

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";const root = createRoot(document.getElementById("root"));
root.render(<StrictMode><App /></StrictMode>
);

React 建議將整個應用程序包裹在嚴格模式中，特別是對于新創建的應用程序。如果你使用的是一個調用 createRoot 的框架，請查閱其文檔以了解如何啟用嚴格模式。

盡管嚴格模式的檢查 僅在開發環境下運行，但它們有助于找出已經存在于代碼中但在生產環境中可能難以復現的錯誤。嚴格模式讓你在用戶反饋之前就可以修復這些錯誤。

一部分代碼啟用嚴格模式

import { StrictMode } from "react";function App() {return (<><Header /><StrictMode><main><Sidebar /><Content /></main></StrictMode><Footer /></>);
}
```## 標題
在這個例子中，嚴格模式的檢查不會對 `Header` 和 `Footer` 組件運行。然而，它們會在 `Sidebar` 和 `Content` 以及它們內部的所有組件上運行，無論多深。