React开发中如何实现视口宽度小于757px时才触发onClick状态逻辑

问题背景 #

在带移动端适配的导航组件开发中，绑定的onClick事件原本承担两项功能：

• 控制移动端菜单的开合状态
• 同步更新汉堡菜单的交互状态

现存异常：即便当前导航组件是为桌面端宽屏尺寸开发适配的，这两个绑定在onClick中的状态更新逻辑依然会在触发时正常执行，造成无意义的状态更新与额外渲染开销。
开发者的核心需求是：仅当浏览器视口宽度小于757px时，才执行onClick函数内的状态更新逻辑，从根源避免桌面端的无效状态更新。

各阶段代码实现 #

最初的基础版本 #

最初的onClick没有任何视口判断逻辑，直接执行两项状态更新：

const [showMobileMenu, setShowMobileMenu] = useState(false);
const [navBarStatus, setNavBarStatus] = useState(false);

const onClick = () => {
    setShowMobileMenu(!showMobileMenu);
    setNavBarStatus(!navBarStatus);
}

存在问题的初步判断实现 #

开发者最初尝试给onClick新增视口宽度判断逻辑，但写出的代码完全无法达到预期效果：

const onClick = () => {
    if (innerWidth < 757)
      setShowMobileMenu(!showMobileMenu);
      setNavBarStatus(!navBarStatus);
}

上述代码的两处核心缺陷：

• 视口宽度的判断逻辑缺失window全局对象，无法正确读取当前视口的实际宽度值
• if语句未用大括号包裹所有需要受条件控制的逻辑，导致setNavBarStatus(!navBarStatus)的执行完全不受判断条件约束，哪怕视口宽度大于等于757px，这行状态更新依然会无条件触发

可正常运行的修正版本 #

定位到问题后，调整写法最终实现了预期逻辑：

const onClick = () => {
    if (window.innerWidth < 757) {
      setShowMobileMenu(!showMobileMenu);
      setNavBarStatus(!navBarStatus);
    }
}

内容的提问来源于stack exchange，提问作者deepen