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)
    }
相关推荐
猫头虎-前端技术26 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫26 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓26 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java27 分钟前
CSS的文本样式
前端·css
前端小趴菜0527 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术27 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技30 分钟前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作31 分钟前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
DONG91333 分钟前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~39 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架