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，以保证方法引用的一致性。