跳到主要内容

StrictMode

StrictMode 如何发现依赖单次执行的代码？​

  • 开发检查: 在其覆盖的子树中额外执行某些本应纯粹的函数，使修改外部数据等问题更容易出现;
  • 检查对象: 包括组件函数体、state 初始化与更新函数、reducer 和 memo 计算，不会因此重复调用点击处理器;
  • 生产行为: 这些额外检查不在生产构建运行，不能把开发日志次数当作生产调用保证;
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

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

重跑 Effect 为什么能暴露资源泄漏？​

  • 对称检查: 开发中额外执行 setup → cleanup → setup，检查连接、监听和计时器是否能完整释放并重建;
  • 修复方向: 补齐清理，使重来之后仍只有一份有效资源，不使用“已运行”ref 跳过第二次建立;
  • 局部边界: 如果 StrictMode 没有位于应用根部，初次挂载不会启用那些可能造成父子 Effect 顺序不符合生产行为的额外检查;

回调 ref 为什么也需要正确清理？​

  • 回调重跑: 开发检查会额外设置与清理回调 ref，暴露列表节点集合只加不删等问题;
  • 实例对应: 注册一个节点就应有对应的解除操作，React 19 可从回调 ref 返回清理函数;
  • 验证方法: 反复显示、隐藏与重排列表后，节点集合不应持续增长或残留已卸载节点;