<StrictMode>

<StrictMode>
  <App />
</StrictMode>

• 参考
  • <StrictMode>
• 用法
  • 为整个应用启用严格模式
  • 为应用程序的一部分启用严格模式
  • 修复在开发过程中通过双重渲染发现的错误
  • 修复在开发中通过重新运行 Effect 发现的错误
  • Fixing bugs found by re-running ref callbacks in development
  • 修复严格模式发出的弃用警告

参考

<StrictMode>

使用 StrictMode 来启用组件树内部的额外开发行为和警告：

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

以下是更多的示例。

严格模式启用了以下仅在开发环境下有效的行为：

• 组件将 额外重新渲染一次 以查找由于非纯渲染而引起的错误。
• 组件将 额外重新运行一次 Effect 以查找由于缺少 Effect 清理而引起的错误。
• 组件将 额外重新运行一次 refs 回调 以查找由于缺少 ref 清理函数而引起的错误。
• 组件将被 检查是否使用了已弃用的 API。

参数

StrictMode 不接受任何参数。

注意事项

• 在由 <StrictMode> 包裹的树中，无法选择退出严格模式。这可以确保在 <StrictMode> 内的所有组件都经过检查。如果两个团队在一个产品上工作，并且对于这些检查是否有价值存在分歧，他们需要达成共识或将 <StrictMode> 下移到树的较低层级。

用法

为整个应用启用严格模式

严格模式为 <StrictMode> 组件内的整个组件树启用额外的开发环境检查，这些检查有助于在开发过程中尽早地发现组件中的常见错误。

如果要为整个应用启用严格模式，请在渲染根组件时使用 <StrictMode> 包裹它：

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));