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>Check console for key presses</div>;
}自定义 hook 封装
为了复用监听逻辑，可以将其封装为自定义 hook。
import { useEffect } from 'react';
function useDocumentEvent(event, callback) {
useEffect(() => {
document.addEventListener(event, callback);
return () => {
document.removeEventListener(event, callback);
};
}, [event, callback]);
}
function MyComponent() {
useDocumentEvent('click', () => {
console.log('Document clicked');
});
return <div>Click anywhere</div>;
}处理依赖项问题
如果回调函数依赖组件状态或 props，需将其加入 useEffect 的依赖数组，或使用 useCallback 优化。
import React, { useState, useEffect, useCallback } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const handleScroll = useCallback(() => {
console.log('Scroll count:', count);
}, [count]);
useEffect(() => {
document.addEventListener('scroll', handleScroll);
return () => {
document.removeEventListener('scroll', handleScroll);
};
}, [handleScroll]);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment: {count}</button>
</div>
);
}注意事项
- 确保在组件卸载时移除事件监听，避免内存泄漏。
- 避免在每次渲染时重新绑定事件，通过依赖数组或
useCallback优化性能。 - 对于频繁触发的事件（如
scroll或mousemove），考虑使用节流或防抖技术减少处理频率。
