反应为什么要删除事件侦听器？

Question

我看到很多像这样的代码:

componentDidMount() {
  // add event listener
}

componentWillUnmount() {
  // remove event listener
}

我理解监听器是否设置在全局类似的东西上window,但是如果它只是在即将卸载的组件中的HTML元素上,那么监听器是否会随组件消失？

Answer 1

由于以下原因,需要删除事件侦听器.

• 如果浏览器没有正确处理它,请避免内存泄漏.现代浏览器会垃圾收集已删除DOM元素的事件处理程序,但在IE等遗留浏览会造成内存泄漏的情况下则不然.
• 避免组件事件的冲突.
• 当事件侦听器的引用存储在某些持久性(如本地存储或类似的东西)中时,删除副作用

这是一篇很好的文章,可以获得有关事件列表的见解

Answer 2

现代浏览器在卸载组件时会删除组件上的事件侦听器,但是出于某种原因,如果将此节点的引用存储在未安装的任何其他组件中或localStorage中,则垃圾收集器将无法处理此组件并且可能导致内存泄漏.

因此,处理此类场景的最安全方法是手动删除事件侦听器componentWillUnmount.

PS使用hooks,react提供了返回函数的方法,该函数可用于删除useEffect钩子中的侦听器.