理解 React 的严格模式

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` 以及它们内部的所有组件上运行，无论多深。