返回的 function 如何不破壞 useEffect 中的事件監聽器？

Question

我做了這個自定義掛鈎以獲得 window 寬度。 它正在工作，但我有一個問題。 我使用useEffect在組件掛載時將事件偵聽器添加到window 。 但后來我的朋友建議我使用return function 來刪除事件監聽器。 這是怎么回事？ 返回的 function 不應該破壞事件偵聽器並使其不起作用嗎？ 因為這是在組件安裝上發生的一次？

import React from "react";

const useWindowSize = () => {
  const [windowSize, setWindowSize] = React.useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  const windowResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };
  React.useEffect(() => {
    window.addEventListener("resize", windowResize);
    return () => {
      window.removeEventListener("resize", windowResize);
    };
  }, []);
  return windowSize;
};

export default useWindowSize;

Answer 1

useEffect 中返回的useEffect在您的組件被卸載之前執行。 它不在掛載時執行。

如果沒有返回 function，每次您的組件重新呈現時，如果您沒有那個空數組依賴項，並且當它被卸載和安裝時，就會在 memory 中添加一個新的EventListener （這很糟糕）。

Answer 2

在unmount上調用此回調以返回useEffect 。 這意味着當您的組件不再呈現時，或者當它的“重新安裝”（關鍵道具已更改）時，將刪除 eventListener。 這很重要，因為如果不刪除事件偵聽器，將同時掛接多個相同的事件偵聽器。

Answer 3

不應該返回 function 銷毀事件偵聽器並使其不起作用？ 因為這是在組件安裝上發生的一次？

返回 function 將在您的情況下執行，當使用掛鈎的組件卸載時（因為空數組作為依賴項）。 所以在那個時候注銷我想的聽眾是有意義的。 多讀書。

Answer 4

嘗試代碼：

    const windowResize = useCallback(event => {
        setWindowSize({
            width: window.innerWidth,
            height: window.innerHeight,
        });
    }, []);

    useEffect(() => {
        window.addEventListener("keydown", windowResize);
        return () => {
            window.removeEventListener("keydown", windowResize);
        };
    }, [windowResize]);