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

【问题标题】：React conditionally render window size keep updating value反应有条件地渲染窗口大小不断更新值
【发布时间】：2020-09-12 07:31:10
【问题描述】：

我正在使用来自React conditionally render based on viewport size 的代码，但我不明白一件事：我在 useEffect 中添加了一个控制台日志，当我在最后添加括号 [] 时，如下所示。这使得 useEffect 只运行一次并且似乎可以工作，因为控制台日志只在我刷新页面时显示一次。但是当我在浏览器上使用 React Developer Tools 时，状态 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>
);}

【问题讨论】：

标签： javascript node.js reactjs react-hooks

【解决方案1】：

useEffect 的唯一目的是在组件挂载时添加监听器，在组件卸载时移除监听器

状态不断更新，因为您已向 DOM 添加了一个 EventListener，它将不断侦听此处“调整大小”的事件，并且只要事件被触发，它就会更新回调函数，

【讨论】：