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)
    }
相关推荐
无限大64 小时前
为什么浏览器能看懂网页代码?——从HTML到渲染引擎的奇幻之旅
前端
福尔摩斯张4 小时前
Linux信号捕捉特性详解:从基础到高级实践(超详细)
linux·运维·服务器·c语言·前端·驱动开发·microsoft
2401_860319524 小时前
DevUI组件库实战:从入门到企业级应用的深度探索 ,如何快速安装DevUI
前端·前端框架
cc蒲公英5 小时前
javascript有哪些内置对象
java·前端·javascript
zhangwenwu的前端小站5 小时前
vue 对接 Dify 官方 SSE 流式响应
前端·javascript·vue.js
王林不想说话5 小时前
受控/非受控组件分析
前端·react.js·typescript
_杨瀚博5 小时前
VUE中使用AXIOS包装API代理
前端
张有志5 小时前
基于 Body 滚动的虚拟滚动组件技术实现
前端·react.js
b***74885 小时前
前端正在进入“超级融合时代”:从单一技术栈到体验、架构与智能的全维度进化
前端·架构
白杨SEO营销5 小时前
白杨SEO:看“20步:从0-1做项目的笨办法”来学习如何选一个项目做及经验分享
前端·学习