react实现监听
React 监听事件的实现方法
事件监听基础
在 React 中，可以通过组件的 props 直接绑定原生 DOM 事件（如 onClick、onChange）。事件处理函数接收 SyntheticEvent 对象（React 封装的事件对象）。
<button onClick={(e) => console.log("Clicked", e)}>点击</button>类组件中的监听
类组件中通过 this 绑定事件处理函数，需注意 this 的指向问题。通常在构造函数中绑定或使用箭头函数。
class MyComponent extends React.Component {
handleClick = (e) => {
console.log("事件触发", e);
};
render() {
return <button onClick={this.handleClick}>类组件按钮</button>;
}
}函数组件中的监听
函数组件直接使用箭头函数或 const 声明事件处理函数，无需考虑 this 绑定问题。
function MyComponent() {
const handleClick = (e) => {
console.log("函数组件事件", e);
};
return <button onClick={handleClick}>函数组件按钮</button>;
}自定义事件监听
通过 useEffect 实现组件挂载时添加原生事件监听，卸载时移除。适用于非 React 封装的事件（如 resize、scroll）。
import { useEffect } from "react";
function CustomListener() {
useEffect(() => {
const handleResize = () => console.log("窗口大小变化");
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return <div>监听窗口变化</div>;
}跨组件事件通信
使用 Context API 或状态管理工具（如 Redux）实现跨组件事件监听。以下为 Context API 示例：
const EventContext = React.createContext();
function ParentComponent() {
const [event, setEvent] = React.useState(null);
return (
<EventContext.Provider value={{ event, setEvent }}>
<ChildComponent />
</EventContext.Provider>
);
}
function ChildComponent() {
const { setEvent } = React.useContext(EventContext);
return <button onClick={() => setEvent("按钮点击")}>触发事件</button>;
}性能优化
避免在渲染函数中动态生成事件处理函数，防止不必要的子组件重渲染。使用 useCallback 缓存函数：
const handleClick = React.useCallback(() => {
console.log("优化后的处理函数");
}, []);第三方事件库
复杂场景可考虑使用事件总线库（如 EventEmitter3）或 React 生态工具（如 useEvent Hook 提案）。需注意与 React 生命周期兼容性。
