React监听窗口宽度变化 触发resize(Hooks版本)

需求场景:

项目中有些样式,需要监听窗口大小更改,做一些自适应处理

Code:

javascript 复制代码
    const [screenW, setScreenW] = useState(document.documentElement.clientWidth || document.body.clientWidth)

	// 一些用到的需要自适应的变量
    const middleWidth = useMemo(() => {
        if (screenW < 1200) {
            return screenW - 64
        } else {
            return screenW - 256
        }
    }, [screenW])

    useEffect(() => {
        window.addEventListener("resize", handleWindowResize)
        return () => {
            window.removeEventListener("resize", handleWindowResize)
        }
    }, [])

    const handleWindowResize = () => {
        setScreenW(document.documentElement.clientWidth || document.body.clientWidth)
    }
相关推荐
初遇你时动了情3 小时前
css中backdrop-filter 详细使用 ios毛玻璃效果、filter和backdrop-filter使用说明
前端·css
景彡先生4 小时前
Python Selenium详解:从入门到实战,Web自动化的“瑞士军刀”
前端·python·selenium
Liudef066 小时前
DeepseekV3.2 实现构建简易版Wiki系统:从零开始的HTML实现
前端·javascript·人工智能·html
景早7 小时前
vue 记事本案例详解
前端·javascript·vue.js
江米小枣tonylua8 小时前
React 19.2:用 useEffectEvent 告别闭包陷阱
react.js
wangjialelele9 小时前
Qt中的常用组件:QWidget篇
开发语言·前端·c++·qt
乔冠宇9 小时前
vue需要学习的点
前端·vue.js·学习
用户47949283569159 小时前
同样是 #,锚点和路由有什么区别
前端·javascript
Hero_11279 小时前
在pycharm中install不上需要的包
服务器·前端·pycharm
爱上妖精的尾巴9 小时前
5-26 WPS JS宏数组元素添加删除应用
开发语言·前端·javascript·wps·js宏