react如何监听
监听事件的基本方法
在React中，监听事件通常通过组件的onClick、onChange等内置事件属性实现。例如，监听按钮点击事件：
<button onClick={() => console.log('按钮被点击')}>点击</button>自定义事件监听
对于非原生DOM事件（如自定义事件或全局事件），可以使用addEventListener和removeEventListener：
import { useEffect } from 'react';
function Component() {
useEffect(() => {
const handleEvent = () => console.log('事件触发');
window.addEventListener('customEvent', handleEvent);
return () => window.removeEventListener('customEvent', handleEvent);
}, []);
return <div>监听自定义事件</div>;
}监听状态变化
通过useEffect监听React状态（state）或属性（props）的变化：
const [count, setCount] = useState(0);
useEffect(() => {
console.log('count变化:', count);
}, [count]);监听路由变化
使用React Router时，可通过useLocation或useEffect监听路由变化：
import { useLocation } from 'react-router-dom';
function App() {
const location = useLocation();
useEffect(() => {
console.log('路由变化:', location.pathname);
}, [location]);
}监听键盘事件
监听全局键盘事件需在useEffect中绑定：
useEffect(() => {
const handleKeyPress = (e) => console.log('按键:', e.key);
document.addEventListener('keydown', handleKeyPress);
return () => document.removeEventListener('keydown', handleKeyPress);
}, []);监听滚动事件
通过useEffect监听页面滚动：
useEffect(() => {
const handleScroll = () => console.log('滚动位置:', window.scrollY);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);监听子组件事件
通过父组件传递回调函数（props）监听子组件事件：
function Child({ onAction }) {
return <button onClick={onAction}>触发事件</button>;
}
function Parent() {
const handleAction = () => console.log('子组件事件触发');
return <Child onAction={handleAction} />;
}
