react如何取消监听
取消事件监听的方法
在React中取消事件监听通常涉及在组件卸载时移除之前添加的监听器。以下是几种常见场景的解决方案：
类组件中的取消监听
对于类组件，通常在componentDidMount中添加监听，并在componentWillUnmount中移除：
class MyComponent extends React.Component {
handleResize = () => {
console.log('Window resized');
};
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
return <div>Resize listener example</div>;
}
}函数组件中的取消监听
使用useEffect钩子可以在函数组件中实现相同的效果：
import React, { useEffect } from 'react';
function MyComponent() {
const handleResize = () => {
console.log('Window resized');
};
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return <div>Resize listener example</div>;
}自定义事件的监听取消
对于自定义事件或第三方库事件，取消方式类似：
useEffect(() => {
const customEventHandler = (event) => {
console.log('Custom event', event.detail);
};
document.addEventListener('customEvent', customEventHandler);
return () => {
document.removeEventListener('customEvent', customEventHandler);
};
}, []);注意事项
确保传递给removeEventListener的函数引用与addEventListener时使用的完全相同。对于匿名函数或每次渲染都重新创建的函数，可能导致无法正确移除监听器。
对于类组件的方法，推荐使用箭头函数或提前绑定this，以保证方法引用的一致性。
