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)
    }
相关推荐
落霞的思绪12 分钟前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q14 分钟前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz21 分钟前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端
橙露1 小时前
React Hooks 深度解析:从基础使用到自定义 Hooks 的封装技巧
javascript·react.js·ecmascript
Exquisite.1 小时前
Nginx
服务器·前端·nginx
2501_920931701 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos
打小就很皮...1 小时前
dnd-kit 实现表格拖拽排序
前端·react.js·表格拖拽·dnd-kit
Ulyanov1 小时前
从静态到沉浸:打造惊艳的Web技术发展历程3D时间轴
前端·javascript·html5·gui开发
打小就很皮...1 小时前
React 19 + Vite 6 + SWC 构建优化实践
前端·react.js·vite·swc
Highcharts.js1 小时前
使用Highcharts与React集成 官网文档使用说明
前端·react.js·前端框架·react·highcharts·官方文档