当前位置：首页 > React

react如何监听document

2026-01-23 22:33:25React

监听 document 事件

在 React 中监听 document 事件可以通过 useEffect 钩子实现。在组件挂载时添加事件监听，卸载时移除监听以避免内存泄漏。

react如何监听document

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleKeyDown = (event) => {
      console.log('Key pressed:', event.key);
    };

    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return <div>Press any key to see console output.</div>;
}

自定义 Hook 封装

将监听逻辑封装成自定义 Hook 以便复用。以下是一个监听 document 点击事件的 Hook 示例：

react如何监听document

import { useEffect } from 'react';

function useDocumentClick(callback) {
  useEffect(() => {
    document.addEventListener('click', callback);
    return () => document.removeEventListener('click', callback);
  }, [callback]);
}

function MyComponent() {
  useDocumentClick(() => {
    console.log('Document clicked!');
  });

  return <div>Click anywhere on the page.</div>;
}

动态事件依赖

当事件处理函数依赖组件状态或 props 时，需将其包含在 useEffect 的依赖数组中，并使用 useCallback 优化性能：

import React, { useEffect, useCallback, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleScroll = useCallback(() => {
    console.log('Scrolled, current count:', count);
  }, [count]);

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

  return (
    <div style={{ height: '200vh' }}>
      <button onClick={() => setCount(c => c + 1)}>Increment: {count}</button>
    </div>
  );
}

注意事项

清理监听器：务必在 useEffect 的清理函数中移除监听器，防止多次绑定。
SSR 兼容：在服务端渲染（SSR）场景中，document 可能不存在，需通过 typeof document !== 'undefined' 进行判断。
事件类型：根据需求选择合适的事件类型（如 keydown、click、scroll 等）。