[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> ); } ```