0Pricing
React Academy · 课时

StrictMode 的作用

了解开发环境中的双重调用和已弃用 API 警告。

StrictMode 的作用 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将了解 React.StrictMode 在开发环境中的作用、它会显示哪些警告，以及它如何帮助您编写更安全的 React 代码。

什么是 StrictMode

StrictMode 是一个特殊的 React 组件，可以包裹组件树的一部分，并且**仅在开发环境中**启用额外检查。它对生产构建没有任何影响。
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

生命周期的双重调用

在严格模式下，React 会在开发环境中有意地将您的组件函数和某些生命周期方法调用**两次**。这样做是为了发现没有得到正确清理的副作用。

为什么要进行双重调用

React 18 及更高版本将来可能会重新挂载组件（例如用于快速刷新和屏幕外 API）。在开发环境中进行双重调用可以模拟这种情况，让您发现订阅不断累积或 DOM 修改执行两次等错误。

副作用的挂载—卸载—重新挂载

在 React 18 的 StrictMode 中，每个 useEffect 都会在初始挂载时执行、清理，然后再次执行。如果您的清理函数正确，这种重复执行不会造成问题。如果应用出现故障，说明清理逻辑缺失或不正确。
useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

检测已弃用的 API

当您的代码使用已弃用的 React API（例如 `componentWillMount`、`componentWillReceiveProps` 和字符串引用）时，StrictMode 会发出警告。这些警告会以黄色警告的形式显示在浏览器控制台中。

旧版上下文 API 警告

如果任何第三方库使用旧版上下文 API（`childContextTypes` / `getChildContext`），StrictMode 会发出警告。这表示该库需要更新为现代的 `React.createContext` API。

可以安全地在现有应用中启用

您可以只在组件树的一部分外层包裹 StrictMode，以便在现有应用中逐步启用它。请从新区域开始，并在修复警告后逐步扩大范围。
function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

没有视觉差异

StrictMode 不会渲染任何可见界面。它纯粹是一个开发工具。您不会在 DOM 中看到任何额外元素，只会看到额外的控制台警告和双重调用行为。

从项目第一天就启用

最佳实践是在项目开始时就启用 StrictMode。尽早修复双重调用问题，比在代码库变得庞大后才发现问题要便宜得多。

快速检查

React StrictMode 对组件函数进行双重调用的目的是什么？

回顾

StrictMode 是一个零成本的开发工具，它会对渲染和副作用进行双重调用，以发现不纯代码，警告已弃用的 API，并为未来的 React 功能做好准备。

接下来

下一课：**纯组件与避免在渲染中产生副作用**——您将学习编写不包含修改操作和外部读取的渲染函数。

常见问题解答

「StrictMode 的作用」课时是免费的吗？

是的 — 「StrictMode 的作用」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「StrictMode 的作用」这节课中我会学到什么？

了解开发环境中的双重调用和已弃用 API 警告。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「StrictMode 的作用」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. StrictMode 的作用
  2. 纯组件与避免渲染副作用
  3. Key 与 Ref 最佳实践
  4. 文件夹结构与命名约定
← 返回 React Academy