当前位置：首页 > React

react如何监听document

2026-02-26 12:27:06React

监听 document 事件的方法

在 React 中监听 document 对象的事件（如点击、滚动、按键等）需通过原生 DOM API 实现，并结合 React 的生命周期或 Hooks 管理监听器的绑定与卸载。

类组件实现方式

在 componentDidMount 中绑定事件，在 componentWillUnmount中移除监听：

import React from 'react';

class DocumentListener extends React.Component {
  handleKeyPress = (e) => {
    console.log('Key pressed:', e.key);
  };

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyPress);
  }

  render() {
    return <div>Check console for key presses</div>;
  }
}

函数组件实现方式（Hooks）

使用 useEffect 处理副作用，返回清理函数以移除监听：

import React, { useEffect } from 'react';

function DocumentListener() {
  const handleClick = (e) => {
    console.log('Clicked at:', e.clientX, e.clientY);
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []); // 空依赖数组确保只运行一次

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

注意事项

依赖数组：若事件处理函数依赖组件状态或 props，需将其添加到 useEffect 的依赖数组中，并确保在更新时重新绑定。

useEffect(() => {
  document.addEventListener('click', handleClick);
  return () => document.removeEventListener('click', handleClick);
}, [handleClick]); // 依赖 handleClick 的变化

性能优化：对于高频事件（如 scroll 或 mousemove），建议使用节流（throttle）或防抖（debounce）减少处理频率。
事件类型：支持所有标准 DOM 事件（如 keydown、resize、visibilitychange 等）。

示例：监听页面滚动

function ScrollTracker() {
  useEffect(() => {
    const handleScroll = () => {
      console.log('Scroll position:', window.scrollY);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div>Scroll and check console</div>;
}

通过上述方法，可以安全地在 React 中监听 document 或 window 的全局事件。

react如何监听document