空依赖数组的useEffect与带条件的useEffect差异及Hook必要性疑问

1. 核心执行时机差异 #

空依赖数组（无内部条件）的useEffect #

function App() {
  useEffect(() => {
    // 这里的逻辑会在**每次组件挂载时执行一次**
    loadDataFromLocalStorage();
    checkAuthToken();
  }, []);
}

• 只要组件完成挂载（包括卸载后重新挂载，比如路由切换回来、组件被销毁重建），这段逻辑就会触发一次。
• 没有额外条件限制，挂载即执行。

带条件判断的useEffect #

根据条件判断的实现方式，又分两种场景：

场景A：用组件外部的全局变量控制

let didInit = false;

function App() {
  useEffect(() => {
    if (!didInit) {
      didInit = true;
      loadDataFromLocalStorage();
      checkAuthToken();
    }
  }, []);
}

• 这个逻辑整个应用生命周期只会执行一次，哪怕组件多次挂载/卸载。因为didInit是组件函数外部的全局变量，不会随组件渲染重置。
• 适合真正需要全局只初始化一次的逻辑（比如应用启动时的全局配置加载）。

场景B：用useRef控制

function App() {
  const didInit = useRef(false);

  useEffect(() => {
    if (!didInit.current) {
      didInit.current = true;
      loadDataFromLocalStorage();
      checkAuthToken();
    }
  }, []);
}

• 逻辑在单个组件实例的生命周期内只执行一次。如果同一个组件被渲染多个实例，每个实例会各自执行一次初始化；如果组件实例被卸载后重新创建（比如路由切换），新实例的didInit.current会重置为false，逻辑会再次执行。

2. 为什么明明把逻辑放effect外也能跑，还要用useEffect？ #

你提到把初始化逻辑直接放在组件函数里看起来效果一样，但实际上存在几个关键问题：

• 避免重复执行：组件函数每次渲染（比如state更新、props变化）都会重新执行，如果把初始化逻辑直接写在组件函数里，每次渲染都会跑一遍，这会造成不必要的性能浪费，甚至引发逻辑错误（比如重复加载本地存储数据、重复校验token）。而useEffect（哪怕是空依赖）只会在挂载时执行一次，后续渲染不会触发。
• DOM依赖场景适配：如果你的初始化逻辑需要访问DOM元素（比如获取某个DOM节点的尺寸、初始化第三方DOM库），必须放在useEffect里——因为useEffect是在组件渲染完成、DOM已经更新后执行的，直接写在组件函数里的话，DOM还没生成，会报错。
• 严格模式兼容性：React开发环境的严格模式会让组件函数执行两次，用来检测意外副作用。如果把初始化逻辑直接写在组件函数里，会被执行两次，可能导致重复初始化的问题；而放在useEffect里，结合条件判断可以避免这种情况（严格模式下effect会模拟卸载再挂载，但条件判断会阻止重复执行）。

内容的提问来源于stack exchange，提问作者SnazzyPencil