如何使用React的useEffect检测文档焦点变化并设置正确依赖项

DevOps 小满

2026-6-18

解决React中监听文档焦点变化的问题

你遇到的核心问题是：document.activeElement的变化不会触发React组件重新渲染，所以即使它作为useEffect的依赖，React也检测不到其变化，自然不会执行回调。

方案一：直接监听焦点事件（推荐）

利用DOM的focusin和focusout事件（这两个事件支持冒泡，能覆盖整个文档的焦点变化场景），在useEffect中添加事件监听器，无需依赖变量：

useEffect(() => {
  const handleFocusChange = () => {
    console.log("change in focus", document.activeElement);
  };

  document.addEventListener('focusin', handleFocusChange);
  document.addEventListener('focusout', handleFocusChange);

  // 组件卸载时移除监听器，避免内存泄漏
  return () => {
    document.removeEventListener('focusin', handleFocusChange);
    document.removeEventListener('focusout', handleFocusChange);
  };
}, []);

方案二：用状态跟踪活跃元素

如果需要将活跃元素作为其他逻辑的依赖，可以通过useState保存当前活跃元素，结合事件监听更新状态，让React能检测到变化：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [activeElement, setActiveElement] = useState(document.activeElement);

  useEffect(() => {
    const handleFocusChange = () => {
      setActiveElement(document.activeElement);
    };

    document.addEventListener('focusin', handleFocusChange);
    document.addEventListener('focusout', handleFocusChange);

    return () => {
      document.removeEventListener('focusin', handleFocusChange);
      document.removeEventListener('focusout', handleFocusChange);
    };
  }, []);

  // 此时activeElement变化会触发这个useEffect执行
  useEffect(() => {
    console.log("change in focus", activeElement);
  }, [activeElement]);

  return <div>Your content here</div>;
}