面试题：React事件处理中常见的导致内存泄漏风险的场景有哪些

Question

请阐述在React事件处理过程中，一般会出现哪些容易引发内存泄漏风险的典型场景，并简单说明原因。

Answer 1

1. 绑定事件未解绑

• 场景：在组件中使用 addEventListener 绑定了DOM事件，但是在组件卸载时没有使用 removeEventListener 解绑。例如在 componentDidMount 生命周期中绑定事件，却忘记在 componentWillUnmount 中解绑。
• 原因：当组件被卸载后，由于事件监听器仍然指向组件实例中的处理函数，而组件实例已不再被正常管理，导致组件实例无法被垃圾回收机制回收，从而造成内存泄漏。

2. 定时器未清除

• 场景：在组件内部使用 setInterval 或 setTimeout 创建了定时器，但在组件卸载时没有通过 clearInterval 或 clearTimeout 清除。
• 原因：定时器会持续引用组件内部的函数或数据，如果组件卸载时定时器未清除，定时器的回调函数依然持有对组件实例的引用，使得组件实例不能被垃圾回收，引发内存泄漏。

3. 闭包导致的内存泄漏

• 场景：在事件处理函数中使用闭包，并且闭包中引用了组件的状态或属性，而事件处理函数在组件卸载后仍然被调用。比如将一个包含对组件 this 引用的函数作为回调传递给第三方库的事件处理机制。
• 原因：闭包会保持对外部作用域（即组件实例相关数据）的引用，即使组件已经卸载，由于闭包的存在，组件实例相关数据无法被垃圾回收，进而导致内存泄漏。