Question

我正在使用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>
);}

Answer 1

useEffect的唯一目的是在组件安装时添加监听器，在组件卸载时将监听器删除

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

有条件地做出反应，渲染窗口大小会不断更新值

1 个答案: