Javascript 为什么要在Reactjs中删除事件侦听器？

就我而言，事件的听众也是如此

  React.useEffect(() => {
    const height = window.addEventListener("resize", () => {
      setWindowSize(window.innerHeight);
    });

    return () => window.removeEventListener("resize", height);
  }, []);

将在刷新页面时停止工作，并应在整个网站查看期间继续工作

---

那么需要清理什么呢？

你写错了，应该是：

useffect（（）=>{
常量高度=（）=>setWindowsSize（window.innerHeight）；
window.addEventListener（“调整大小”，高度）；
return（）=>window.removeEventListener（“调整大小”，高度）；
},[]);

如果您的组件先卸载，然后在不删除事件侦听器的情况下重新装载，该怎么办？您将在一个未安装的组件上调用

setWindowsSize

，它告诉您这是一个no-op，并且可能表示内存泄漏，但在将来，它可能会抛出一个错误

---

总是自己打扫干净。这是一个好习惯。

删除事件侦听器将使组件更加健壮，使应用程序更快，并减少内存泄漏

如果你愿意的话

  React.useEffect(() => {
    window.addEventListener("resize", () => {
      setWindowSize(window.innerHeight);
    });
  }, []);

然后，如果当前组件被卸载，但是用户没有离开页面，那么监听器将继续存在，尽管监听器的有用组件不再存在。这对于

调整大小

侦听器来说可能没有多大关系，对于像这样简单的计算来说也没有多大关系，但是：

• 如果计算成本更高，那就浪费了DOM中不存在的组件的CPU时间；最好完全不需要计算
• 如果添加的侦听器触发速度非常快（如

  滚动

  ），则删除侦听器可能有助于提高性能，特别是如果有多个类似的组件

如果这个组件在你的应用程序运行时总是存在的，那么严格地说，没有必要进行清理——但是如果你决定改变结构，使组件不总是被渲染的话，返回清理函数会更优雅，并且会使重构更容易

另一个问题：您没有正确删除事件侦听器。改用这个：

React.useEffect(() => {
  const resizeHandler = () => setWindowSize(window.innerHeight);
  window.addEventListener("resize", resizeHandler);
  return () => window.removeEventListener("resize", resizeHandler);
}, []);

---

清理单个eventListener在小项目中可能没有多大意义；但一般来说，侦听器将存储在某个地方（例如堆）。想象一下，如果每个组件都注册了一个事件，并且没有清理它们，那么过一段时间，我们将拥有一堆毫无意义的事件侦听器，它们不再连接到原始组件并保留在内存中，但仍将被执行；这将浪费资源（即cpu、内存），并使应用程序速度变慢、滞后、效率降低。

window.addEventListener（）

始终返回

未定义的