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

Question

这段代码中的useEffect每次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确实运行一次并注册一次事件侦听器。 但随后，调用了侦听器回调。

Answer 2

如果你在 useEffect 中使用 console.log，你会看到它实际上只会运行一次。 基本上，您已经为 resize 事件设置了一次事件侦听器。 但是您仍然拥有已注册的事件侦听器，它按预期工作。