为何在React的useClickAway Hook中使用useLayoutEffect？

先看你提到的useClickAway源码：

export function useClickAway(cb) {
  const ref = React.useRef(null);
  const refCb = React.useRef(cb);

  React.useLayoutEffect(() => {
    refCb.current = cb;
  });

  React.useEffect(() => {
    const handler = (e) => {
      const element = ref.current;
      if (element && !element.contains(e.target)) {
        refCb.current(e);
      }
    };

    document.addEventListener("mousedown", handler);
    document.addEventListener("touchstart", handler);

    return () => {
      document.removeEventListener("mousedown", handler);
      document.removeEventListener("touchstart", handler);
    };
  }, []);

  return ref;
}

你的理解完全正确，这里使用useLayoutEffect而非useEffect更新回调ref，核心就是为了规避异步执行带来的旧回调触发风险，下面详细拆解：

1. 执行时机的关键差异 #

• useLayoutEffect是同步触发：React完成DOM更新后，会立刻执行它的回调，此时浏览器还没开始重绘。这意味着组件渲染完成后，refCb.current会瞬间更新为最新的cb，任何紧随其后的用户点击都会触发正确的回调。
• useEffect是异步延迟执行：它的回调会被放到浏览器的任务队列中，要等浏览器完成重绘、主线程空闲时才会运行。这就留下了一个时间窗口：组件DOM更新完成 → 浏览器重绘 → useEffect执行更新refCb。如果用户在这个窗口内点击，事件处理器会拿到旧的refCb.current，执行过时的逻辑。

2. 为什么不用带依赖的useEffect？ #

你提出的useEffect(() => { refCb.current = cb }, [cb])写法，确实能在cb变化时更新ref，但依然解决不了异步执行的问题：

• 当cb因组件重渲染变化时，useEffect的回调要等到浏览器重绘后才会执行，这段时间内的点击还是会触发旧回调。
• 原代码中无依赖的useLayoutEffect会在每一次组件渲染后同步更新refCb，确保refCb.current始终和最新的cb保持一致，彻底消除时间差。

3. 关于文档"仅处理布局时使用"的疑问 #

React文档的这个建议是为了防止滥用useLayoutEffect——因为它同步执行的特性会阻塞浏览器重绘，若在其中执行复杂逻辑会影响性能。但在这个场景下：

• 更新ref只是一个简单的赋值操作，没有任何DOM布局计算，性能开销可以忽略。
• 相比可能出现的旧回调执行bug，这点性能代价完全值得。

补充：替代实现思路 #

还有一种更直观的写法，不需要用ref保存回调，直接把cb加入useEffect的依赖数组，每次cb变化时重新绑定事件：

export function useClickAway(cb) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const handler = (e) => {
      const element = ref.current;
      if (element && !element.contains(e.target)) {
        cb(e);
      }
    };

    document.addEventListener("mousedown", handler);
    document.addEventListener("touchstart", handler);

    return () => {
      document.removeEventListener("mousedown", handler);
      document.removeEventListener("touchstart", handler);
    };
  }, [cb]);

  return ref;
}

但这种写法的问题是，每次cb变化都会解绑再绑定事件，虽然逻辑简单，但频繁的事件操作可能带来微小的性能损耗。原代码用ref保存回调的方式，只需要绑定一次事件，性能更优。

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