<React.StrictMode> 是一个只在开发环境生效的组件,它不渲染任何可见 UI,而是对其子孙组件附加一系列「压力测试」:
findDOMNode 在 React 19 已被彻底移除);import { StrictMode } from 'react';
<StrictMode>
<App />
</StrictMode>;双重调用是为了帮你发现「渲染不纯」:
function Counter() {
const [count, setCount] = useState(0);
// ❌ 渲染期间修改外部变量 —— 双重调用会立刻暴露不一致
window.__c = (window.__c || 0) + 1;
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}双重调用应当产生相同的结果:第一次调用与第二次调用的返回值若不一致,说明渲染依赖了外部可变状态。生产构建中这些双重调用会被完全移除,因此不会影响运行性能。
并发渲染(Concurrent Rendering)下,React 可能先渲染一棵「被丢弃」的树再渲染最终树。StrictMode 的双重调用提前让你习惯「渲染可能被中断/重来」,从而写出可中断安全的组件。这与 14-React 19 新特性概览 中的 use、Suspense 配合,要求组件在任意渲染阶段都保持纯净。
StrictMode 是开发期的「纠错教练」:用双重调用逼出副作用隐患,生产环境零开销。它是写出并发安全组件的必要训练。