react如何监听document
监听 document 事件的方法
在 React 中监听 document 对象的事件（如点击、滚动、键盘事件等）可以通过以下方式实现：
使用 useEffect 添加和移除事件监听
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>;
}监听点击事件
useEffect(() => {
const handleClick = (event) => {
console.log('Clicked on:', event.target);
};
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
};
}, []);监听滚动事件
useEffect(() => {
const handleScroll = () => {
console.log('Window scrolled:', window.scrollY);
};
document.addEventListener('scroll', handleScroll);
return () => {
document.removeEventListener('scroll', handleScroll);
};
}, []);注意事项
- 清理事件监听器：在
useEffect的返回函数中移除事件监听器，避免内存泄漏。 - 依赖数组：如果事件处理函数依赖组件状态或 props，需要将其添加到依赖数组中，或者使用
useCallback缓存函数。
示例：依赖状态的监听
const [count, setCount] = useState(0);
useEffect(() => {
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
setCount(prev => prev + 1);
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [setCount]); // 依赖 setCount自定义 Hook 封装
可以将事件监听逻辑封装为自定义 Hook，方便复用：
import { useEffect } from 'react';
function useDocumentEvent(eventName, handler, dependencies = []) {
useEffect(() => {
document.addEventListener(eventName, handler);
return () => {
document.removeEventListener(eventName, handler);
};
}, dependencies);
}
// 使用示例
function MyComponent() {
const handleKeyDown = (event) => {
console.log('Key pressed:', event.key);
};
useDocumentEvent('keydown', handleKeyDown);
return <div>Press any key</div>;
}事件委托优化
如果需要在多个组件中监听同一事件，可以使用事件委托减少监听器数量：
useEffect(() => {
const handleGlobalClick = (event) => {
if (event.target.matches('.my-button')) {
console.log('Button clicked');
}
};
document.addEventListener('click', handleGlobalClick);
return () => {
document.removeEventListener('click', handleGlobalClick);
};
}, []);以上方法适用于 React 函数组件。类组件可以通过 componentDidMount 和 componentWillUnmount 实现类似逻辑。
