使用React JS获取窗口宽度时返回值与实际尺寸不符该如何解决？

核心问题原因 #

• 你误用了window.screen.width属性：该属性返回的是设备显示器的整体物理宽度，和浏览器窗口的实际大小无关，所以你调整窗口大小时数值不会变化，和预期不符。
• useEffect依赖配置错误：你将widthWindow放入了依赖数组，每次setWidthWindow更新状态后都会重新触发useEffect执行，形成死循环，存在严重性能问题。
• 自定义Hook未返回宽度值：当前代码执行后没有对外暴露宽度结果，业务组件无法拿到数值。

修复后完整代码 #

import React, { useState, useEffect } from 'react';

// 建议按React自定义Hook规范命名为use开头
const useWindowWidth = () => {
  // 初始化直接取当前视口宽度，避免初始值为null的异常
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
  
  const updateWidth = () => {
    // 如需获取不含滚动条的内容区域宽度，可替换为 document.documentElement.clientWidth
    setWindowWidth(window.innerWidth)
  }

  useEffect(() => {
    window.addEventListener('resize', updateWidth)
    // 组件卸载时移除事件监听，避免内存泄漏
    return () => window.removeEventListener('resize', updateWidth)
  }, []) // 依赖数组留空，仅在组件挂载/卸载时执行一次，不会重复触发

  // 返回实时窗口宽度供业务组件使用
  return windowWidth
}

export default useWindowWidth

调用示例 #

在需要用到窗口宽度的组件内直接调用Hook即可：

const MyComponent = () => {
  const currentWidth = useWindowWidth()
  return (
    <div>
      <p>当前窗口宽度为：{currentWidth}px</p>
      {/* 可根据宽度做响应式逻辑判断 */}
      {currentWidth < 768 ? <MobileView /> : <DesktopView />}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Fraza Aditya Wiguna