有条件地响应渲染窗口大小不断更新值

Question

我正在使用 React 中的代码根据视口大小有条件地渲染，但我不明白一件事： 我在useEffect中添加了一个控制台日志，当我在最后添加括号[ ]时，如您在下面看到的那样。这使得使用效果只运行一次，并且似乎有效，因为控制台日志在我刷新页面时只显示一次。但是当我在浏览器上使用 React 开发人员工具时，状态 windowsSize 会根据我更新窗口大小的内容不断更新值。

const Navbar = () => {
const [windowSize, setwindowSize] = useState(window.innerWidth);
const updateWindowsSize = () => {
setwindowSize(window.innerWidth)
}
useEffect(() => {
console.log(windowSize)
window.addEventListener("resize", updateWindowsSize);
return () => window.removeEventListener("resize", updateWindowsSize);
},[]);
return (
<Fragment>
{windowSize>1000 ? (<NavDesk/>) : (<NavSmartPhone/>)} 
</Fragment>
);}

Answer 1

useEffect 的唯一目的是在组件挂载时添加侦听器，在组件卸载时将其删除

状态不断更新，因为您已将 EventListener 添加到 DOM，它将不断侦听此处"调整大小"的事件，只要事件被触发，它就会更新回调函数，