Question

我看到很多这样的代码：

componentDidMount() {
  // add event listener
}

componentWillUnmount() {
  // remove event listener
}

我了解侦听器是否设置在诸如window之类的全局对象上，但是如果它只是在组件中要卸载的HTML元素上，那么侦听器是否仍会随组件一起消失？ >

Answer 1

由于以下原因，需要删除事件监听器。

如果浏览器处理不当，请避免内存泄漏。现代浏览器将垃圾收集已删除的DOM元素的事件处理程序，但对于像IE这样的旧式浏览器，这会造成内存泄漏的情况并非如此。
避免组件事件发生冲突。
删除事件侦听器的引用以某种持久性（例如本地存储或类似的东西）存储时的副作用

这是一个很好的article，可让您深入了解事件列表器

Answer 2

现代浏览器在卸载组件时确实会删除它们上的事件侦听器，但是由于某些原因，如果将此节点的引用存储在未安装的任何其他组件或localStorage中，则Garbage Collector将无法对其进行处理，并且可能会导致内存泄漏。

因此，处理此类情况的最安全方法是手动删除componentWillUnmount中的事件侦听器。

P.S。使用挂钩，react提供了一种返回函数的方法，该函数可用于删除useEffect挂钩中的侦听器。

Answer 3

如果未删除事件侦听器，则会导致较旧的浏览器（IE 6和7，如果我没有记错的话）会导致内存泄漏。因此将导致不必要的高内存利用率，这将导致许多问题。同样，在这种情况下，您将遇到调试问题，因为在大型项目中您永远无法控制整个代码库，并且可以从不同组件加载同一个组件的多个引用，并且如果浏览器未处理内存泄漏，那么它将对触发事件造成很多混乱。

反应为什么我应该删除事件监听器？

3 个答案: