加载中...

useEffect 实现原理深度解析 | underflowed

useEffect 实现原理深度解析

2025年11月14日

useEffect 是 React 中最强大也最容易混淆的 Hook 之一。它不仅让我们能够处理副作用，还涉及调度系统、优先级、清理机制等复杂概念。本文将深入剖析 useEffect 的完整生命周期。

一、Effect 对象的数据结构

Effect 对象

Effect Tag 系统

存储位置

Effect 对象存储在两个地方：

二、初始挂载：mountEffect

挂载流程

pushEffect 详解

为什么使用环形链表？

方便从任意位置开始遍历
插入操作只需 O(1) 时间
lastEffect.next 就是 firstEffect

三、重渲染：updateEffect

依赖比较

依赖比较算法

关键点：

使用 Object.is 进行比较（值相等或同一引用）
不比较数组长度变化（但会有警告）
空数组 [] 意味着永远不重新执行
undefined 或不传意味着每次都执行

四、Effect 执行：flushPassiveEffects

调度时机

执行时机：

DOM 已更新
浏览器已绘制（在下一帧之前）
异步执行（不阻塞浏览器绘制）

执行流程图

Loading diagram...

flushPassiveEffects 实现

关键设计：

清理函数必须在 effect 函数之前执行
子组件的 effects 先于父组件执行

五、清理函数执行：commitPassiveUnmountEffects

遍历 Fiber 树

执行清理函数

六、Effect 函数执行：commitPassiveMountEffects

执行流程

调用 create 函数

关键点：

create() 的返回值会被保存为 destroy
如果 create() 不返回函数，destroy 为 undefined
下次重新执行时，会先调用这个 destroy

七、执行顺序详解

完整执行顺序

组件卸载

八、useEffect vs useLayoutEffect

核心区别

特性	useEffect	useLayoutEffect
执行时机	DOM 更新后，浏览器绘制后（异步）	DOM 更新后，浏览器绘制前（同步）
是否阻塞渲染	否	是
Effect Tag	HookPassive	HookLayout
调度优先级	NormalSchedulerPriority	同步执行
使用场景	数据获取、订阅、日志	DOM 测量、避免闪烁

实现差异

何时使用 useLayoutEffect

九、常见陷阱与最佳实践

依赖数组问题

清理函数的重要性

Effect 中的状态更新

竞态条件处理

十、性能优化

避免不必要的 Effect

拆分复杂 Effect

自定义 Hook 封装

十一、调试技巧

使用 useEffect 的第三个参数（DEV only）

添加日志

十二、总结

核心要点

Effect 对象：由 tag、create、destroy、deps 组成
执行时机：DOM 更新后、浏览器绘制后（异步）
执行顺序：先清理、后执行；子组件先、父组件后
依赖比较：使用 Object.is 逐个比较
清理函数：必须正确实现，防止内存泄漏
性能优化：拆分独立关注点，避免不必要的 effect

最佳实践清单

✅ 始终正确声明依赖数组
✅ 为订阅和定时器提供清理函数
✅ 使用 ESLint 规则检查依赖
✅ 处理竞态条件和组件卸载
✅ 拆分复杂 effect 为多个独立 effect
✅ 优先考虑是否真的需要 effect
✅ 测量前用 useLayoutEffect，其他用 useEffect

type Effect = {
  tag: HookFlags,          // 标记是否需要执行
  create: () => (() => void) | void,  // effect 函数
  destroy: (() => void) | void,        // 清理函数
  deps: Array<any> | null,             // 依赖数组
  next: Effect | null,                 // 链表指针
};

// Effect 标记（flags）
const HookHasEffect = 0b001;   // 需要执行
const HookPassive = 0b010;     // Passive effect (useEffect)
const HookLayout = 0b100;      // Layout effect (useLayoutEffect)

// 组合使用
HookHasEffect | HookPassive     // 需要执行的 useEffect
HookPassive                      // 不需要执行的 useEffect（deps 未变）

// 1. Fiber 的 updateQueue（所有 effects 的链表）
fiber.updateQueue = {
  lastEffect: effect,  // 环形链表的最后一个 effect
};

// 2. Hook 的 memoizedState（当前 effect 引用）
hook.memoizedState = effect;

function mountEffect(create, deps) {
  return mountEffectImpl(
    PassiveEffect | PassiveStaticEffect,  // Fiber flags
    HookPassive,                          // Hook flags
    create,
    deps,
  );
}

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  // 1. 创建 Hook 节点
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  
  // 2. 标记 Fiber 有 passive effects
  currentlyRenderingFiber.flags |= fiberFlags;
  
  // 3. 创建 Effect 对象并添加到链表
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,  // 注意：包含 HookHasEffect
    create,
    undefined,                   // 初始时 destroy 为 undefined
    nextDeps,
  );
}

function pushEffect(tag, create, destroy, deps) {
  // 创建 Effect 对象
  const effect = {
    tag,
    create,
    destroy,
    deps,
    next: null,
  };
  
  // 获取 fiber 的 updateQueue
  let componentUpdateQueue = currentlyRenderingFiber.updateQueue;
  
  if (componentUpdateQueue === null) {
    // 首个 effect，创建 updateQueue
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    currentlyRenderingFiber.updateQueue = componentUpdateQueue;
    componentUpdateQueue.lastEffect = effect.next = effect;  // 环形链表
  } else {
    // 添加到环形链表末尾
    const lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      const firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  
  return effect;
}

function updateEffect(create, deps) {
  return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
}

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
  // 1. 获取当前 Hook
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  let destroy = undefined;
  
  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;  // 保留上一次的清理函数
    
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps;
      
      // 2. 比较依赖数组
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 依赖未变化，创建 Effect 但不设置 HookHasEffect
        hook.memoizedState = pushEffect(
          hookFlags,              // 注意：没有 HookHasEffect
          create,
          destroy,
          nextDeps,
        );
        return;
      }
    }
  }
  
  // 3. 依赖变化，创建需要执行的 Effect
  currentlyRenderingFiber.flags |= fiberFlags;
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,  // 包含 HookHasEffect
    create,
    destroy,                     // 使用上次的 destroy
    nextDeps,
  );
}

function areHookInputsEqual(nextDeps, prevDeps) {
  if (prevDeps === null) {
    return false;
  }
  
  // 逐个比较（使用 Object.is）
  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (Object.is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  return true;
}

function commitRootImpl(root, recoverableErrors, transitions, renderPriorityLevel) {
  // ... 其他 commit 逻辑
  
  // 检查是否有 passive effects
  if (
    (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
    (finishedWork.flags & PassiveMask) !== NoFlags
  ) {
    if (!rootDoesHavePassiveEffects) {
      rootDoesHavePassiveEffects = true;
      
      // 调度 passive effects（异步）
      scheduleCallback(NormalSchedulerPriority, () => {
        flushPassiveEffects();
        return null;
      });
    }
  }
  
  // ... 继续其他工作
}

function flushPassiveEffectsImpl() {
  if (rootWithPendingPassiveEffects === null) {
    return false;
  }
  
  const root = rootWithPendingPassiveEffects;
  rootWithPendingPassiveEffects = null;
  
  const prevExecutionContext = executionContext;
  executionContext |= CommitContext;
  
  // 1. 先执行所有清理函数
  commitPassiveUnmountEffects(root.current);
  
  // 2. 再执行所有 effect 函数
  commitPassiveMountEffects(root, root.current, lanes, transitions);
  
  executionContext = prevExecutionContext;
  flushSyncCallbacks();
  
  return true;
}

function commitPassiveUnmountEffects(finishedWork) {
  setCurrentDebugFiberInDEV(finishedWork);
  commitPassiveUnmountOnFiber(finishedWork);
  resetCurrentDebugFiberInDEV();
}

function commitPassiveUnmountOnFiber(finishedWork) {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent: {
      // 递归处理子节点（深度优先）
      recursivelyTraversePassiveUnmountEffects(finishedWork);
      
      if (finishedWork.flags & Passive) {
        // 执行当前 fiber 的清理函数
        commitHookPassiveUnmountEffects(
          finishedWork,
          finishedWork.return,
          HookPassive | HookHasEffect,  // 只处理有此标记的
        );
      }
      break;
    }
    // ... 其他 fiber 类型
  }
}

function commitHookEffectListUnmount(
  flags,
  finishedWork,
  nearestMountedAncestor,
) {
  const updateQueue = finishedWork.updateQueue;
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    
    // 遍历环形链表
    do {
      if ((effect.tag & flags) === flags) {
        // 匹配 tag，执行清理
        const inst = effect.inst;
        const destroy = inst.destroy;
        
        if (destroy !== undefined) {
          inst.destroy = undefined;  // 清除引用
          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
        }
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
  try {
    destroy();  // 执行清理函数
  } catch (error) {
    captureCommitPhaseError(current, nearestMountedAncestor, error);
  }
}

function commitPassiveMountOnFiber(
  finishedRoot,
  finishedWork,
  committedLanes,
  committedTransitions,
) {
  const flags = finishedWork.flags;
  
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent: {
      // 先递归处理子节点
      recursivelyTraversePassiveMountEffects(
        finishedRoot,
        finishedWork,
        committedLanes,
        committedTransitions,
      );
      
      if (flags & Passive) {
        // 执行当前 fiber 的 effects
        commitHookPassiveMountEffects(
          finishedWork,
          HookPassive | HookHasEffect,
        );
      }
      break;
    }
    // ... 其他类型
  }
}

function commitHookEffectListMount(flags, finishedWork) {
  const updateQueue = finishedWork.updateQueue;
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    
    do {
      if ((effect.tag & flags) === flags) {
        // 匹配 tag，执行 effect
        const create = effect.create;
        const inst = effect.inst;
        
        const destroy = create();  // 执行 effect 函数
        inst.destroy = destroy;     // 保存清理函数
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

function App() {
  console.log('1. render App');
  
  useEffect(() => {
    console.log('3. effect App');
    return () => console.log('cleanup App');
  });
  
  return <Child />;
}

function Child() {
  console.log('2. render Child');
  
  useEffect(() => {
    console.log('4. effect Child');
    return () => console.log('cleanup Child');
  });
  
  return null;
}

// 首次渲染输出：
// 1. render App
// 2. render Child
// [DOM 更新]
// [浏览器绘制]
// 4. effect Child    ← 子组件先执行
// 3. effect App      ← 父组件后执行

// 重新渲染输出：
// 1. render App
// 2. render Child
// [DOM 更新]
// [浏览器绘制]
// cleanup Child      ← 先清理子组件
// cleanup App        ← 再清理父组件
// 4. effect Child    ← 再执行子组件 effect
// 3. effect App      ← 最后执行父组件 effect

// 当组件卸载时：
function Parent() {
  const [show, setShow] = useState(true);
  
  return (
    <div>
      {show && <Child />}
      <button onClick={() => setShow(false)}>Hide</button>
    </div>
  );
}

// 点击按钮后：
// 1. render Parent
// [DOM 更新 - 移除 Child]
// [浏览器绘制]
// cleanup Child      ← 只执行清理，不执行 effect

// useEffect - Passive flag
function mountEffect(create, deps) {
  return mountEffectImpl(
    PassiveEffect,           // Fiber flag
    HookPassive,            // Effect tag
    create,
    deps,
  );
}

// useLayoutEffect - Layout flag
function mountLayoutEffect(create, deps) {
  return mountEffectImpl(
    UpdateEffect,           // Fiber flag (不同！)
    HookLayout,            // Effect tag (不同！)
    create,
    deps,
  );
}

// ✅ 场景 1：测量 DOM 并更新状态
function Tooltip() {
  const [height, setHeight] = useState(0);
  const ref = useRef(null);
  
  useLayoutEffect(() => {
    const rect = ref.current.getBoundingClientRect();
    setHeight(rect.height);  // 不会闪烁
  });
  
  return <div ref={ref} style= top: -height >Tooltip</div>;
}

// ✅ 场景 2：同步第三方库状态
function Chart({ data }) {
  const chartRef = useRef(null);
  
  useLayoutEffect(() => {
    const chart = new ThirdPartyChart(chartRef.current);
    chart.setData(data);
    return () => chart.destroy();
  }, [data]);
  
  return <div ref={chartRef} />;
}

// ❌ 不要用于：
// - 数据获取（会阻塞渲染）
// - 不需要在绘制前完成的操作

// ❌ 错误：遗漏依赖
function Component({ userId }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData(userId).then(setData);  // userId 是依赖！
  }, []);  // 缺少 userId
}

// ✅ 正确：包含所有依赖
useEffect(() => {
  fetchData(userId).then(setData);
}, [userId]);

// ✅ 使用 ESLint 规则检查
// eslint-plugin-react-hooks 会警告遗漏的依赖

// ❌ 内存泄漏
function Chat({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    // 缺少清理！组件卸载后连接仍然存在
  }, [roomId]);
}

// ✅ 正确清理
function Chat({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    
    return () => {
      connection.disconnect();  // 清理连接
    };
  }, [roomId]);
}

// ✅ 取消异步操作
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    let cancelled = false;
    
    fetchResults(query).then(data => {
      if (!cancelled) {
        setResults(data);
      }
    });
    
    return () => {
      cancelled = true;  // 防止设置已卸载组件的状态
    };
  }, [query]);
}

// ❌ 可能的无限循环
function Component() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(count + 1);  // 每次渲染都触发！
  });  // 没有依赖数组
}

// ✅ 正确的条件更新
function Component() {
  const [count, setCount] = useState(0);
  const [shouldUpdate, setShouldUpdate] = useState(false);
  
  useEffect(() => {
    if (shouldUpdate) {
      setCount(c => c + 1);
      setShouldUpdate(false);
    }
  }, [shouldUpdate]);
}

// ❌ 竞态条件
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    fetchResults(query).then(setResults);
    // 问题：如果 query 快速变化，旧请求可能后完成
  }, [query]);
}

// ✅ 解决方案 1：使用取消标记
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    let cancelled = false;
    
    fetchResults(query).then(data => {
      if (!cancelled) {
        setResults(data);
      }
    });
    
    return () => {
      cancelled = true;
    };
  }, [query]);
}

// ✅ 解决方案 2：使用 AbortController
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    const controller = new AbortController();
    
    fetch(`/api/search?q=${query}`, {
      signal: controller.signal
    })
      .then(res => res.json())
      .then(setResults)
      .catch(err => {
        if (err.name !== 'AbortError') {
          // 处理真正的错误
        }
      });
    
    return () => {
      controller.abort();
    };
  }, [query]);
}

// ❌ 不需要 effect
function Component({ items }) {
  const [filtered, setFiltered] = useState([]);
  
  useEffect(() => {
    setFiltered(items.filter(item => item.active));
  }, [items]);  // 多余的 effect
}

// ✅ 直接计算
function Component({ items }) {
  const filtered = useMemo(
    () => items.filter(item => item.active),
    [items]
  );
}

// ✅ 或者不用 memo（如果计算很快）
function Component({ items }) {
  const filtered = items.filter(item => item.active);
}

// ❌ 混杂的 effect
function Component({ userId, theme }) {
  useEffect(() => {
    // 获取用户数据
    fetchUser(userId).then(setUser);
    
    // 应用主题
    document.body.className = theme;
    
    // 订阅事件
    const handler = () => {};
    window.addEventListener('resize', handler);
    
    return () => {
      window.removeEventListener('resize', handler);
    };
  }, [userId, theme]);  // 任何变化都重新执行所有逻辑
}

// ✅ 拆分独立关注点
function Component({ userId, theme }) {
  // Effect 1: 用户数据
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
  
  // Effect 2: 主题
  useEffect(() => {
    document.body.className = theme;
  }, [theme]);
  
  // Effect 3: 事件监听
  useEffect(() => {
    const handler = () => {};
    window.addEventListener('resize', handler);
    return () => {
      window.removeEventListener('resize', handler);
    };
  }, []);  // 只在挂载时设置
}

// 封装通用的 effect 逻辑
function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  
  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return size;
}

// 使用
function Component() {
  const { width, height } = useWindowSize();
  return <div>{width} x {height}</div>;
}

function useEffectWithLog(effect, deps, name) {
  useEffect(() => {
    console.log(`[${name}] Effect running`, deps);
    const cleanup = effect();
    
    return () => {
      console.log(`[${name}] Cleanup running`, deps);
      cleanup?.();
    };
  }, deps);
}

// 使用
function Component({ userId }) {
  useEffectWithLog(
    () => {
      fetchUser(userId);
    },
    [userId],
    'FetchUser'
  );
}