面试题：React 中如何避免因事件绑定导致的内存泄漏

类组件

添加事件监听器：在 componentDidMount 生命周期方法中添加事件监听器。例如：

import React, { Component } from'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }

  handleScroll() {
    // 处理滚动事件的逻辑
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  render() {
    return <div>My Component</div>;
  }
}

export default MyComponent;

移除事件监听器：在 componentWillUnmount 生命周期方法中移除事件监听器，确保在组件卸载时，监听器被正确移除，避免内存泄漏。

函数组件

添加事件监听器：使用 useEffect 钩子。例如：

import React, { useEffect } from'react';

const MyFunctionComponent = () => {
  const handleScroll = () => {
    // 处理滚动事件的逻辑
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <div>My Function Component</div>;
};

export default MyFunctionComponent;

移除事件监听器：useEffect 钩子返回的函数会在组件卸载时执行，在这个返回函数中移除事件监听器，从而防止内存泄漏。如果依赖数组为空 []，表示只在组件挂载和卸载时执行添加和移除操作；如果依赖数组中有变量，那么当变量变化时也会重新添加和移除监听器。

面试题：React 中如何避免因事件绑定导致的内存泄漏

知识考点

面试题答案

类组件

函数组件