为什么 useEffect 运行 一旦 window.innerWidth 发生变化，即使其中的第二个参数是一个空数组

Question

useEffect这段代码中运行s每次window大小变化，但是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 确实 运行s 一次并注册了一次事件侦听器。但随后，监听器回调被调用。

你告诉事件侦听器去听 resize 对吧？所以你应该期望它在任何时候被调用 resize 发生。

此外，如果您 return 从您的效果中运行，它将 运行 当组件卸载时（因为空依赖）；你可以用它来删除监听器：

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

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

Answer 2

如果您在 useEffect 中 console.log，您会发现它实际上只会获得 运行 一次。基本上，您已经设置了一次调整大小事件的事件侦听器。但是您仍然拥有已注册的事件侦听器，它可以正常工作。