Reactjs 如何检测窗口宽度的变化？

根据窗口的宽度，我可以应用不同的内容页面。 我这样做的条件是：

{window.innerWidth>575？：}

它可以很好地工作，但如果您在不手动重新加载的情况下减少页面，则无法工作

我试图对它实现useffect，但我找不到如何通过widow.width更改触发它。 拜托，你能帮我吗

这是我的代码：

const[windowSize，setWindowSize]=useState（window.innerWidth）；
useffect（（）=>{
setWindowsSize（window.innerWidth）；
});
返回(
... 
{WindowsSize>575？：}
...
);

---

提前谢谢

您可以使用

窗口。onresize

您可以检查

函数ReportWindowsSize（）{
console.log（window.innerHeight、window.innerWidth）
}
window.onresize=reportWindowSize如果不注册事件侦听器，则无法更新
innerWidth

以下是使用事件侦听器的一种方法：

  const handleWindowResize = useCallback(event => {

      setWindowSize(window.innerWidth);

  }, []); 


  useEffect(() => {
    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  }, [handleWindowResize]);

您可以在
useffect
hook中添加和删除事件

您可以使用
useCallback
hook创建一个
memonized
处理程序

这称为
回调模式

在这里，我们只是使用更新的innerWidth设置状态，最好使用
回调模式
，并仅在初始装载时注册事件侦听器

如果在
useffect
hook中注册事件，则事件侦听器正在使用侦听器引用及其词法作用域，但会在新渲染时使用更新的闭包创建一个新函数，因此在处理程序中您将无法访问更新的状态

有关
useCallback
和
innerWidth
的详细信息在调整窗口大小时不会更改。您需要重新加载页面以更新它。