[TOC] ## StrictMode 嚴格模式啟用了以下僅在開發環境下有效的行為： * 組件將[重新渲染一次](https://zh-hans.react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development)，以查找由于非純渲染而引起的錯誤。 * 組件將[重新運行 Effect 一次](https://zh-hans.react.dev/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development)，以查找由于缺少 Effect 清理而引起的錯誤。 * 組件將被[檢查是否使用了已棄用的 API](https://zh-hans.react.dev/reference/react/StrictMode#fixing-deprecation-warnings-enabled-by-strict-mode)。 ## 在 react 中開啟 整個開啟 ``` import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render( <StrictMode> <App /> </StrictMode> ); ``` 部分開啟 ``` function App() { return ( <> <Header /> <StrictMode> <main> <Sidebar /> <Content /> </main> </StrictMode> <Footer /> </> ); } ``` ## 在 next 中開啟 next.config.ts ``` const nextConfig: NextConfig = { /* config options here */ reactStrictMode: true, }; ``` ## 示例 bad ``` export default function StoryTray({ stories }) { const items = stories; items.push({ id: 'create', label: '創建故事' }); return ( <ul> {items.map(story => ( <li key={story.id}> {story.label} </li> ))} </ul> ); } ``` > 如果開啟嚴格模式,渲染兩次會發現數組中追加了兩次"創建故事" good ``` import { useState } from 'react'; export default function StoryTray({ stories }) { const [isHover, setIsHover] = useState(false); const items = stories.slice(); // 復制數組,來使函數變成純函數 items.push({ id: 'create', label: '創建故事' }); return ( <ul onPointerEnter={() => setIsHover(true)} onPointerLeave={() => setIsHover(false)} style={{ backgroundColor: isHover ? '#ddd' : '#fff' }} > {items.map(story => ( <li key={story.id}> {story.label} </li> ))} </ul> ); } ```