为什么 useEffect 在 window.innerWidth 更改后运行，即使其中的第二个参数是空数组

Question

useEffect这段代码每次窗口大小改变时都会运行，但是第二个参数useEffect是一个空数组，我想只要第二个参数与上次相比没有改变，就useEffect不会运行

import React from "react"

export default function WindowTracker() {
    
    const [windowWidth, setWindowWidth] = React.useState(window.innerWidth)
    
    React.useEffect(() => {
        window.addEventListener("resize", function() {
            setWindowWidth(window.innerWidth)
        })
    }, [])
    
    return (
        <h1>Window width: {windowWidth}</h1>
    )
}

Answer 1

它不是useEffect运行，而是注册的事件侦听器回调。useEffect确实运行一次并注册事件侦听器一次。但随后，侦听器回调被调用。

你告诉事件监听者去听resize对吗？所以你应该预料到它会在任何时候被调用resize。

此外，如果您从效果中返回函数，它将在组件卸载时运行（因为空依赖项）；您可以使用它来删除侦听器：

React.useEffect(() => {
  let cb = function () {
    setWindowWidth(window.innerWidth);
  };
  window.addEventListener("resize", cb);

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