reactjs - 为什么我需要在 React 的 useEffect 中清理

Question

我是新手，我不确定为什么在处理 EventListeners 时需要清理功能，我试图在调整窗口大小时设置一个事件，但我在 chrome 的(元素 -> 事件监听器)选项卡中只有 1 个事件开发工具，即使我没有在我的钩子(Hook)中返回清理函数

这是我的代码:

 useEffect(() => {
    window.addEventListener("resize", function checksize() {
      console.log("1");
    });
  });

Answer 1

首先，你绝对应该避免在你的代码中使用它，因为在每次重新渲染时，它都会向窗口添加一个新的事件监听器。

其次，要回答您的问题，您应该具有清理效果以删除事件监听器和其他类似机制以避免内存泄漏。如果你不清理它们，那么你就会让悬挂的事件监听器占用内存，这不是一个好主意，并且也可能在你的其他组件中被拾取。所以处理这种代码的理想方式是

 const logOne = () => console.log("1"); //put the function reference in a variable so that you can remove the event afterwards

 useEffect(() => {
    window.addEventListener("resize", logOne);

   return () => {
     window.removeEventListener("resize", logOne); //remove event listener on unmount
   }
  }, []); //empty dependency array so that function only runs on first render, so that consequent rerenders don't cause you to add more of these event listeners