如何优化检测模态框外部点击的自定义Hook性能？

一、为什么用useMemo替代useEffect会导致页面失效？ #

你完全用错API了——useMemo是用来缓存计算结果的，根本不是处理事件监听这种副作用的正确工具。

React的useEffect会严格遵循“清理旧副作用→执行新副作用”的流程：每次依赖变化时，先调用上一次的清理函数（移除旧的事件监听），再添加新的监听。但useMemo不一样，它是在组件渲染过程中执行的，返回的清理函数不会被React自动调用。

当你连续开闭模态框时，每次组件渲染都会通过useMemo创建新的handleClick函数并给document加监听，但旧的监听从来没被移除过——堆了四五个监听之后，每次点击都会触发好几次handleOutsideClick，模态框的状态逻辑直接被搞乱，自然就没法正常用了。

二、性能优化点&正确写法 #

先给你一个修复后的基础版本，再逐个讲优化点：

1. 把useMemo换回useEffect（最核心修复） #

这是必须先做的，useEffect才是处理事件监听这类副作用的正确选择：

export function useOutsideClick(
  refs: Array<RefObject<HTMLElement>>,
  handleOutsideClick: (e: Event) => void,
) {
  useEffect(() => {
    function handleClick(e: Event) {
      // 先判断ref是否存在，避免空指针
      const isOutside = refs.every(ref => 
        ref.current && !ref.current.contains(e.target as Node)
      );
      if (isOutside) {
        handleOutsideClick(e);
      }
    }

    document.addEventListener('mousedown', handleClick);
    // 组件卸载/依赖变化时自动移除监听
    return () => document.removeEventListener('mousedown', handleClick);
  }, [refs, handleOutsideClick]);
}

2. 避免不必要的函数重创建与依赖频繁变化 #

• 缓存回调函数：如果外部传入的handleOutsideClick是每次渲染都新建的函数（比如直接写() => setIsOpen(false)），会导致useEffect每次都重新执行。可以用useCallback缓存这个回调，或者在Hook内部用useCallback包裹handleClick：

export function useOutsideClick(
  refs: Array<RefObject<HTMLElement>>,
  handleOutsideClick: (e: Event) => void,
) {
  // 缓存handleClick，避免每次渲染都新建
  const memoizedHandleClick = useCallback((e: Event) => {
    const isOutside = refs.every(ref => 
      ref.current && !ref.current.contains(e.target as Node)
    );
    if (isOutside) handleOutsideClick(e);
  }, [refs, handleOutsideClick]);

  useEffect(() => {
    document.addEventListener('mousedown', memoizedHandleClick);
    return () => document.removeEventListener('mousedown', memoizedHandleClick);
  }, [memoizedHandleClick]);
}

• 稳定refs数组的引用：如果你在使用Hook的组件里是直接写const refs = [modalRef, triggerRef]，这个数组每次渲染都是新的，会触发useEffect频繁执行。给refs数组加个useMemo缓存：

// 调用Hook的组件里
const refs = useMemo(() => [modalRef, triggerRef], [modalRef, triggerRef]);
useOutsideClick(refs, handleCloseModal);

3. 优化点击判断逻辑 #

• 提前检查ref.current是否存在，避免对null调用contains方法；
• 如果没有特殊需求（比如要区分点击和拖拽），可以把mousedown换成click事件，减少触发频率；
• 可以加个快速判断：如果点击的元素是document.body，直接判定为外部点击，不用遍历所有refs。

4. 只在模态框打开时添加监听 #

没必要一直挂着事件监听，只有模态框处于打开状态时才添加，关闭时自动移除，减少不必要的事件触发：

export function useOutsideClick(
  refs: Array<RefObject<HTMLElement>>,
  handleOutsideClick: (e: Event) => void,
  isOpen: boolean, // 新增：模态框是否打开的状态
) {
  const memoizedHandleClick = useCallback((e: Event) => {
    const isOutside = refs.every(ref => 
      ref.current && !ref.current.contains(e.target as Node)
    );
    if (isOutside) handleOutsideClick(e);
  }, [refs, handleOutsideClick]);

  useEffect(() => {
    // 模态框没打开就啥也不干
    if (!isOpen) return;

    document.addEventListener('mousedown', memoizedHandleClick);
    return () => document.removeEventListener('mousedown', memoizedHandleClick);
  }, [isOpen, memoizedHandleClick]);
}

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