面试题：React类组件生命周期中事件绑定引发的内存泄漏及解决办法

Question

在React类组件中，当你在componentDidMount生命周期方法中绑定了一个全局事件，并且在componentWillUnmount中没有正确解绑，会导致内存泄漏。请详细说明为什么会出现这种内存泄漏，以及如何使用正确的方式来绑定和解绑事件以避免内存泄漏。同时，解释如果在事件处理函数中使用了箭头函数，对内存泄漏和绑定解绑过程有什么影响。

Answer 1

为什么会出现内存泄漏

1. 事件绑定原理：在 componentDidMount 中绑定全局事件时，实际上是给全局对象（如 window）添加了一个事件监听器，该监听器指向组件实例的某个方法。这使得全局对象持有了对组件实例的引用。
2. 组件卸载情况：当组件卸载时，如果没有在 componentWillUnmount 中正确解绑事件，全局对象上的事件监听器依然存在，且持续引用着组件实例。而组件实例由于被引用，垃圾回收机制无法回收其占用的内存，从而导致内存泄漏。

正确的绑定和解绑事件方式

1. 绑定事件：在 componentDidMount 中绑定事件。例如，绑定 window 的 scroll 事件：

import React, { Component } from 'react';

class MyComponent extends Component {
  handleScroll = () => {
    // 处理滚动事件的逻辑
    console.log('Window scrolled');
  }

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

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

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

export default MyComponent;

2. 解绑事件：在 componentWillUnmount 生命周期方法中，使用 removeEventListener 方法来解绑之前绑定的事件。确保传入的事件处理函数与绑定的是同一个函数引用。

使用箭头函数的影响

1. 内存泄漏方面：使用箭头函数定义事件处理函数，由于箭头函数没有自己的 this，它会捕获其所在上下文的 this，在组件中就是组件实例的 this。所以在事件处理函数中使用箭头函数不会改变内存泄漏的本质，依然需要在组件卸载时正确解绑事件，否则同样会导致内存泄漏。
2. 绑定解绑过程：箭头函数在定义时就捕获了 this，因此无需担心 this 指向问题，在绑定和解绑事件时更加简洁。例如上面代码中，handleScroll 是一个箭头函数，在 componentDidMount 和 componentWillUnmount 中可以直接使用该函数引用进行绑定和解绑，不需要额外处理 this 指向。如果使用普通函数定义 handleScroll，可能需要在构造函数中使用 this.handleScroll = this.handleScroll.bind(this) 来确保 this 指向正确，否则在事件触发时 this 可能指向错误的对象。