React 源码深探：useEffect 和 useLayoutEffect 执行机制剖析

前端

2023-09-05 04:18:25

在 React 的世界中，useEffect 和 useLayoutEffect 是两个至关重要的钩子，它们使我们能够在组件生命周期的不同阶段执行副作用。然而，这两个钩子在执行方式上有细微差别，这可能会影响应用程序的性能。

useEffect：异步执行

useEffect 是一个异步钩子，这意味着它不会阻塞组件渲染。它将在渲染后执行，通常在浏览器更新 DOM 之前。因此，如果您需要在更新 DOM 之前执行任何操作，useEffect 是最佳选择。

useLayoutEffect：同步执行

另一方面，useLayoutEffect 是一个同步钩子，这意味着它将在组件渲染过程中执行，并且将在 DOM 更新之前阻塞渲染。这对于需要在 DOM 更新之前执行的操作非常有用，例如测量 DOM 节点的大小或位置。

选择合适的钩子

选择合适的钩子对于优化 React 应用程序的性能至关重要。以下是一些准则：

如果您需要在渲染后执行副作用（例如，进行 API 调用或设置定时器），请使用 useEffect。
如果您需要在 DOM 更新之前执行副作用（例如，测量 DOM 节点的大小），请使用 useLayoutEffect。

深入源码

为了更深入地理解这两个钩子的执行机制，让我们深入 React 源码。

useEffect

export function useEffect(create, deps) {
  const oldDeps = currentHook.deps;
  if (equalDeps(oldDeps, deps)) {
    // Effect already scheduled, skip it
    currentHook.deps = deps;
    return;
  }
  currentHook.deps = deps;
  effectList = {
    create,
    deps,
    next: effectList,
  };
  // Mark the update as having side-effects
  currentHook.flags |= PerformedWork;
}

这段代码显示了 useEffect 的核心实现。当调用 useEffect 时，它将创建一个副作用对象并将其添加到副作用链表中。此副作用对象包含副作用函数（create）和副作用依赖项（deps）。

在渲染阶段，React 将遍历副作用链表并调用每个副作用函数。但是，如果副作用的依赖项没有改变（即 equalDeps(oldDeps, deps) 为真），则 React 将跳过该副作用。

useLayoutEffect

export function useLayoutEffect(create, deps) {
  // TODO: Reintroduce errors for missing dependencies
  const oldDeps = currentHook.deps;
  if (equalDeps(oldDeps, deps)) {
    // Effect already scheduled, skip it
    currentHook.deps = deps;
    return;
  }
  currentHook.deps = deps;
  // Unmount the old effect
  const destroy = oldDeps ? oldDeps.destroy : undefined;
  if (destroy !== undefined) {
    // TODO: check if currentHook is mounted, if not
    // don't invoke the destroy function
    destroy();
  }
  const create = create();
  effectList = {
    create,
    destroy,
    next: effectList,
  };
}

useLayoutEffect 的实现与 useEffect 类似，但有一些关键区别。

首先，useLayoutEffect 将在组件卸载时调用副作用函数的 destroy 方法。这可用于清理资源或撤消副作用的影响。

其次，useLayoutEffect 在渲染阶段直接调用副作用函数，而不是将它们添加到副作用链表中。这意味着它们将在 DOM 更新之前同步执行。

性能优化

明智地使用 useEffect 和 useLayoutEffect 可以显着提高 React 应用程序的性能。以下是一些技巧：