react如何监听
React 监听事件的方法
在React中监听事件可以通过多种方式实现，包括原生DOM事件监听、React合成事件以及第三方库的使用。
使用React合成事件
React提供了合成事件系统，事件处理函数通过组件props传递。例如，监听点击事件：
function Button() {
const handleClick = () => {
console.log('Button clicked');
};
return <button onClick={handleClick}>Click me</button>;
}监听原生DOM事件
对于需要直接监听DOM元素事件的场景，可以通过useEffect和addEventListener实现：
import { useEffect, useRef } from 'react';
function Component() {
const ref = useRef();
useEffect(() => {
const handleClick = () => console.log('Element clicked');
ref.current.addEventListener('click', handleClick);
return () => {
ref.current.removeEventListener('click', handleClick);
};
}, []);
return <div ref={ref}>Click me</div>;
}监听自定义事件
通过EventEmitter或自定义事件系统实现跨组件通信：
import { useEffect } from 'react';
function Component() {
useEffect(() => {
const handler = (e) => console.log('Custom event:', e.detail);
window.addEventListener('customEvent', handler);
return () => {
window.removeEventListener('customEvent', handler);
};
}, []);
return <div>Listening to custom events</div>;
}监听全局事件
对于如键盘、滚动等全局事件，可以直接在useEffect中监听：
import { useEffect } from 'react';
function Component() {
useEffect(() => {
const handleKeyDown = (e) => console.log('Key pressed:', e.key);
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, []);
return <div>Press any key</div>;
}使用第三方库
对于复杂的事件监听需求，可以使用如react-use等库提供的hooks：
import { useKey } from 'react-use';
function Component() {
useKey('Enter', () => console.log('Enter pressed'));
return <div>Press Enter key</div>;
}注意事项
- 使用
useEffect时需注意清理事件监听以避免内存泄漏。 - React合成事件与原生事件行为基本一致，但存在细微差异（如事件冒泡机制）。
- 跨组件事件通信建议优先考虑Context API或状态管理工具。
