我看到很多这样的代码：
componentDidMount() { // add event listener } componentWillUnmount() { // remove event listener }
如果侦听器设置在像window这样的全局对象上，我可以理解，但是如果它只是设置在将要卸载的组件中的HTML元素上，侦听器不会随组件一起消失吗？
window
5jvtdoz21#
由于以下原因，需要删除事件侦听器。
下面是一个很好的article，可以深入了解事件列表程序
uqcuzwp82#
现代浏览器在卸载组件时确实会删除组件上的事件侦听器，但由于某种原因，如果您将此节点的引用存储在任何其他未装载的组件或localStorage中，垃圾收集器将无法处理此操作，并可能导致内存泄漏。因此，处理此类情况最安全的方法是手动删除componentWillUnmount中的事件侦听器。P.S.对于钩子，react提供了返回函数的方法，该函数可用于删除useEffect钩子中的侦听器。
componentWillUnmount
useEffect
wfauudbj3#
如果不删除事件侦听器，将导致旧浏览器的内存泄漏（IE 6和7，如果我没记错的话）。因此会导致不必要的高内存利用率，这会导致很多问题。另外，在这种情况下，您将遇到调试问题，因为在大型项目中，您永远无法控制整个代码库，并且可以从不同组件加载同一组件的多个引用，如果浏览器不处理内存泄漏，那么它将在触发事件方面造成许多混乱。
3条答案
按热度按时间5jvtdoz21#
由于以下原因，需要删除事件侦听器。
下面是一个很好的article，可以深入了解事件列表程序
uqcuzwp82#
现代浏览器在卸载组件时确实会删除组件上的事件侦听器，但由于某种原因，如果您将此节点的引用存储在任何其他未装载的组件或localStorage中，垃圾收集器将无法处理此操作，并可能导致内存泄漏。
因此，处理此类情况最安全的方法是手动删除
componentWillUnmount中的事件侦听器。P.S.对于钩子，react提供了返回函数的方法，该函数可用于删除
useEffect钩子中的侦听器。wfauudbj3#
如果不删除事件侦听器，将导致旧浏览器的内存泄漏（IE 6和7，如果我没记错的话）。因此会导致不必要的高内存利用率，这会导致很多问题。另外，在这种情况下，您将遇到调试问题，因为在大型项目中，您永远无法控制整个代码库，并且可以从不同组件加载同一组件的多个引用，如果浏览器不处理内存泄漏，那么它将在触发事件方面造成许多混乱。