React useEffect 中无依赖数组时的事件监听器行为解析-js教程-PHP中文网

本文深入解释为何在未提供依赖数组的 useeffect 中注册 resize 事件监听器后，组件仍能持续响应窗口尺寸变化——关键在于 useeffect 的执行时机与清理函数的调用条件。

本文深入解释为何在未提供依赖数组的 useeffect 中注册 resize 事件监听器后，组件仍能持续响应窗口尺寸变化——关键在于 useeffect 的执行时机与清理函数的调用条件。

在提供的代码中，useEffect 钩子没有传入依赖数组（即 []），这意味着它会在每次组件重新渲染后执行（包括初始挂载和后续所有更新），而非仅在挂载时运行一次。

useEffect(() => {
  window.addEventListener('resize', onResize);

  return () => {
    window.removeEventListener('resize', onResize);
  }
});
// ❌ 缺少依赖数组 → 每次 render 后都会执行该 effect

其执行逻辑如下：

首次渲染后：执行 useEffect，添加 resize 监听器；
下一次渲染（例如因 setWindowWidth 触发）：先执行上一轮 effect 的清理函数（移除旧监听器），再执行本轮 effect（重新添加监听器）；
因此监听器始终处于“存活”状态——并非“添加后立即移除”，而是“旧监听器被清理、新监听器被重建”的连续过程。

⚠️ 但这种写法存在严重隐患：

React Native For Android 源码编译中文WORD版

本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看

下载

每次状态更新都会触发重渲染 → 每次都新建监听器 → 若未严格保证 onResize 是稳定引用（如未用 useCallback 包裹），会导致重复绑定、内存泄漏或监听器堆积；
即使 onResize 是稳定函数，频繁增删监听器也属低效操作，违背性能最佳实践。

✅ 正确做法是显式传入空依赖数组 []，确保 effect 仅在组件挂载时执行一次，并在卸载时清理：

useEffect(() => {
  const handleResize = () => {
    setWindowWidth(window.innerWidth);
    setWindowHeight(window.innerHeight);
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // ✅ 添加空依赖数组，仅挂载/卸载时执行

此外，为避免闭包导致的状态陈旧问题（如 setWindowWidth 中读取到初始 windowWidth），推荐直接在事件回调中调用 setState，或使用函数式更新（本例中因直接读取 window.innerWidth，无此风险）。

总结：useEffect 的清理函数不会在同一次渲染周期内执行，而是在下一次 effect 执行前（或组件卸载时）调用；无依赖数组的 effect 会随每次渲染反复运行，形成“监听器续订”假象——但这不是健壮的设计，务必通过 [] 显式控制执行时机，并确保事件处理器稳定可清理。