useEffect 原理

好的，我们来深入、彻底地剖析 React useEffect 的实现原理。

我会遵循第一性原理，从 “为什么需要 Effect” 出发，逐步拆解其核心机制，最后用一个简化的、带有详尽注释的代码实现来为你揭示其内部工作流程。

---

一、问题的根源：为什么 React 需要 useEffect？

React 的核心思想是声明式 UI，即 UI = f(state)。你告诉 React 你想要_什么样_的 UI（声明），React 负责搞定如何更新 DOM（实现）。这个模型非常纯粹和强大，因为函数 f 应该是纯函数——对于相同的输入（state 和 props），总是返回相同的输出（UI 描述），并且没有副作用（Side Effect）。

但现实世界的应用充满了副作用：

• 数据获取：fetch('/api/data')

• DOM 操作：手动修改一个不受 React 控制的 DOM 元素，比如设置 document.title。

• 订阅：window.addEventListener(...) 或 webSocket.onmessage(...)

• 定时器：setInterval(...) 或 setTimeout(...)

这些操作不直接关联于渲染输出，它们会改变外部世界的状态。如果直接把它们写在组件函数体里，会在每次渲染时都执行，这会引发性能问题和逻辑混乱（比如重复发起 API 请求、重复订阅事件）。

useEffect 的诞生，就是为了给函数组件提供一个标准、可控的方式，来处理这些“逃离”了 React 纯粹渲染流程的副作用。它保证了：

1. 时机可控：副作用代码在 React 完成 DOM 更新、浏览器完成绘制之后异步执行，不会阻塞渲染。

2. 条件可控：可以精确控制副作用在何时重新执行（通过依赖项数组）。

3. 生命周期管理：提供清理机制，以防止内存泄漏和无效操作（例如，在组件卸载时取消订阅）。

二、useEffect 的核心机制与数据结构

要理解 useEffect 的原理，必须先了解 React 内部是如何表示一个组件实例的。在 React 16+（Fiber 架构）中，每个组件实例都对应一个Fiber 节点。这个 Fiber 节点是一个 JavaScript 对象，它保存了组件的类型、props、state，以及一个存储 Hooks 信息的链表。

是的，当你连续调用 useState, useEffect 时，它们的信息被存储在一个有序链表中。

// 这是一个极度简化的 Fiber 节点概念
FiberNode = {
  type: 'MyComponent',
  state: { ... },
  props: { ... },
  memoizedState: hook1 -> hook2 -> hook3 -> null // Hooks 链表
};

// 每个 Hook 节点
Hook = {
  memoizedState: any, // 存储 state 的值，或 useEffect 的依赖项
  next: Hook | null   // 指向下一个 Hook
};

useEffect 的工作就完全建立在这个 Fiber 节点和 Hooks 链表之上。

我们来拆解 useEffect 的执行流程，这分为两个主要阶段：渲染阶段（Render Phase） 和 提交阶段（Commit Phase）。

1. 渲染阶段（Render Phase）

这是 React 调用你的组件函数的时候。

1. 首次渲染：

   • 当 useEffect(create, deps) 被调用时，React 会创建一个新的 Hook 对象。

   • 它将 create 函数（你传入的第一个参数）和 deps 依赖项数组存储在这个 Hook 对象中。

   • 关键：它不会立刻执行 create 函数。相反，它会在 Fiber 节点的 updateQueue（更新队列）上标记一个待处理的 Effect。这个标记包含了 create 函数本身。

   • 这个 Hook 对象被添加到当前 Fiber 节点的 Hooks 链表中。

2. 更新渲染：

   • 组件函数再次执行，useEffect(create, deps) 也再次被调用。

   • React 根据调用顺序找到上一次渲染时对应的 Hook 对象。（这就是为什么 Hooks 必须在顶层调用，不能在条件或循环中）

   • React 会比较本次传入的 deps 数组和上一次存储在 Hook 对象中的旧 deps 数组。

   • 比较规则是 Object.is，逐项比较。

   • 如果依赖项没有变化：什么都不做。

   • 如果依赖项发生变化（或者没有提供依赖项数组 undefined）：React 就会再次在 Fiber 节点的 updateQueue 上标记一个待处理的 Effect。

2. 提交阶段（Commit Phase）

这是 React 已经计算完所有变更并更新了真实 DOM之后。

1. 执行 Effects：

   • 在 Commit 阶段的末尾，浏览器已经基本完成了绘制。React 会遍历所有在渲染阶段被标记了“待处理 Effect”的 Fiber 节点。

   • 对于每一个标记，React 会异步地执行它对应的 create 函数。

   • 为什么是异步？ 为了不阻塞浏览器的绘制和用户交互，让页面感觉更流畅。这也是它和 useLayoutEffect（同步执行）的核心区别。

2. 处理清理函数（Cleanup）：

   • create 函数可以返回一个函数，这就是清理函数。

   • 当 React 执行 create 函数后，如果发现有返回值（且是函数），它会把这个清理函数存储在 Effect 对象自身上。

   • 清理函数何时执行？

     • 组件卸载时：React 会执行所有该组件上存储的清理函数。

     • 依赖项更新，Effect 重新执行前：在下一次执行该 Effect 的 create 函数之前，React 会先执行上一次存储的清理函数。这保证了旧的订阅或定时器被清理掉，防止了内存泄漏。

总结一下这个流程：

Render Phase: useEffect 被调用 -> 比较依赖项 -> 如果变化，则**调度（Schedule）**一个 Effect。

Commit Phase: React 更新 DOM -> 浏览器绘制 -> React 异步执行所有被调度的 Effect -> 存储返回的清理函数。

三、简化的代码实现

下面的代码并非 React 源码，而是一个高度简化的模型，用于揭示 useEffect 的核心工作原理。它能让你清晰地看到 Fiber、Hook 链表、依赖项比较、Effect 队列和清理函数的完整生命周期。

JavaScript

// 全局变量，用于模拟 React 的内部工作状态
let workInProgressFiber = null; // 当前正在处理的 Fiber 节点
let hookIndex = 0;              // 当前正在处理的 Hook 在链表中的索引

// --- React 内部数据结构模拟 ---

/**
 * 创建一个 Fiber 节点
 * @param {Function} component - 组件函数
 * @returns {object} Fiber 节点
 */
function createFiber(component) {
  return {
    type: component,
    // memoizedState 在真实 React 中是 Hooks 链表的头节点
    // 这里简化为一个数组，索引即代表顺序
    hooks: [],
    // 存储需要执行的副作用函数及其清理函数
    effects: [],
  };
}

/**
 * 获取当前正在处理的 Hook 对象
 * 如果是首次渲染，则创建新的 Hook 对象
 * @returns {object} Hook 对象
 */
function getHook() {
  // 从当前 Fiber 的 hooks 数组中获取
  const hooks = workInProgressFiber.hooks;
  
  // 如果当前索引的 hook 不存在，说明是首次渲染该 hook
  if (hookIndex >= hooks.length) {
    hooks.push({});
  }
  
  // 返回当前 hook，并将索引后移，为下一个 hook 做准备
  return hooks[hookIndex++];
}


// --- useEffect 的模拟实现 ---

/**
 * 模拟 useEffect 的实现
 * @param {Function} create - 副作用函数，可能返回一个清理函数
 * @param {Array<any> | undefined} deps - 依赖项数组
 */
function useEffect(create, deps) {
  // 1. 获取当前 Hook 对象
  // 'memoizedState' 在这里用于存储上一次的依赖项
  const hook = getHook();

  // 2. 比较依赖项
  const oldDeps = hook.memoizedState;
  let hasChanged = true; // 默认依赖项已改变

  if (oldDeps) {
    // 如果提供了依赖项数组，则进行比较
    // 如果没有提供 deps (undefined)，则每次都执行
    if (deps) {
      // 检查新旧依赖项数组长度是否一致
      hasChanged = deps.length !== oldDeps.length;
      if (!hasChanged) {
        // 长度一致，逐项比较
        for (let i = 0; i < deps.length; i++) {
          if (!Object.is(deps[i], oldDeps[i])) {
            hasChanged = true;
            break;
          }
        }
      }
    }
  }

  // 3. 如果依赖项变化，则调度 Effect
  if (hasChanged) {
    // 'effect' 是一个对象，包含了待执行的函数和它未来的清理函数
    const effect = {
      create: create, // 副作用函数
      destroy: undefined, // 清理函数，初始为 undefined
    };
    
    // 将这个 effect 推入当前 Fiber 节点的 effects 队列中
    // 真实 React 中会使用更复杂的更新队列和标记位
    workInProgressFiber.effects.push(effect);

    // 将新的依赖项存储在 hook 中，供下一次比较
    hook.memoizedState = deps;
  }
}


// --- 模拟 React 的渲染和提交过程 ---

/**
 * 模拟 React 的渲染（执行组件函数）
 * @param {object} fiber - 要渲染的 Fiber 节点
 */
function render(fiber) {
  // 设置全局变量，指向当前工作的 Fiber
  workInProgressFiber = fiber;
  // 重置 hook 索引，因为每次渲染都是从头开始调用 hooks
  hookIndex = 0;
  // 清空上一次的 effects 队列，准备接收新的 effects
  fiber.effects = [];
  
  // 执行组件函数，这会触发内部的 useEffect 调用
  fiber.type();
  
  // 渲染阶段结束，返回 Fiber 节点
  return fiber;
}

/**
 * 模拟 React 的提交（执行 Effects 和清理）
 * @param {object} fiber - 已经完成渲染的 Fiber 节点
 */
function commit(fiber) {
  console.log("--- Commit Phase ---");
  
  // 遍历 effects 队列
  fiber.effects.forEach(effect => {
    // 1. 执行上一次的清理函数 (如果存在)
    // 这是为了在执行新 effect 之前，清理掉旧的 effect (如取消订阅)
    if (effect.destroy) {
      console.log("  🧹 Running cleanup function...");
      effect.destroy();
    }
    
    // 2. 执行新的副作用函数
    console.log("  🚀 Running effect create function...");
    const destroy = effect.create();
    
    // 3. 存储新的清理函数 (如果返回了的话)
    if (typeof destroy === 'function') {
      console.log("  💾 Storing new cleanup function.");
      effect.destroy = destroy;
    }
  });

  // 清理全局变量
  workInProgressFiber = null;
  console.log("--- Commit Phase End ---\n");
}

// --- 示例应用 ---

// 我们的组件
let count = 0;
let show = true;
function MyComponent() {
  console.log(`Render with count: ${count}`);
  
  useEffect(() => {
    console.log(`  [Effect 1] Runs because count changed to: ${count}`);
    document.title = `Count: ${count}`;
    
    // 返回一个清理函数
    return () => {
      console.log(`  [Cleanup 1] Cleaning up effect for count: ${count-1}`);
    };
  }, [count]); // 依赖于 count

  useEffect(() => {
    console.log("  [Effect 2] Runs only once after initial render.");
    
    const handler = () => console.log("Window resized!");
    window.addEventListener('resize', handler);
    
    return () => {
      console.log("  [Cleanup 2] Removing resize listener.");
      window.removeEventListener('resize', handler);
    };
  }, []); // 空依赖数组，只运行一次

  useEffect(() => {
    console.log("  [Effect 3] Runs after every render.");
  }); // 没有依赖数组，每次渲染都运行
}


// --- 模拟 React 应用生命周期 ---

// 1. 初始化
console.log("--- Initial Render ---");
const myComponentFiber = createFiber(MyComponent);

// 2. 首次渲染和提交
let renderedFiber = render(myComponentFiber);
commit(renderedFiber);

// 3. 模拟状态更新 (count 改变)
console.log("--- Update Render (count changes) ---");
count = 1;
renderedFiber = render(myComponentFiber);
commit(renderedFiber);

// 4. 模拟另一次状态更新 (count 再次改变)
console.log("--- Update Render (count changes again) ---");
count = 2;
renderedFiber = render(myComponentFiber);
commit(renderedFiber);

// 5. 模拟状态更新 (但 count 不变，仅是父组件重渲染)
console.log("--- Update Render (count does NOT change) ---");
renderedFiber = render(myComponentFiber);
commit(renderedFiber); // 注意：这次 commit 时，依赖于 count 的 effect 不会运行

// 6. 模拟组件卸载 (手动触发所有清理)
console.log("--- Unmount ---");
commit({
  ...myComponentFiber,
  // 模拟卸载时，清空 create 函数，只保留 destroy
  effects: myComponentFiber.effects.map(e => ({...e, create: ()=>{}}))
});

当你运行上述代码，观察控制台的输出，你会清晰地看到 useEffect 的整个生命周期：何时渲染、何时比较依赖、何时执行副作用、何时执行清理。

四、最终总结与要点

1. 核心目的：在函数组件中管理副作用，将非纯粹的逻辑操作与纯粹的渲染逻辑解耦。

2. 数据结构：useEffect 的状态（主要是依赖项）存储在与组件实例（Fiber 节点）关联的 Hook 链表中。

3. 双阶段执行：

   • 渲染阶段：调用 useEffect，比较依赖项，若有变化则调度一个 Effect。此阶段是纯粹的计算，不执行副作用。

   • 提交阶段：在 DOM 更新后，异步执行被调度的 Effect，并处理其清理函数。

4. 依赖项数组是性能优化的关键，它告诉 React 是否需要跳过一个 Effect 的执行。

   • [dep1, dep2]：dep1 或 dep2 改变时重新执行。

   • []：只在组件首次挂载后执行一次。

   • undefined（不传）：每次渲染后都执行。

5. 清理函数是 useEffect 实现资源安全管理（如取消订阅、清除定时器）的基石，它总是在下一次 Effect 执行之前或组件卸载时运行。

6. 调用顺序的稳定性是 Hooks 机制的基石。React 依赖这个不变的顺序来在每次渲染时找到正确的 Hook 状态。