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)
    }
相关推荐
街尾杂货店&10 小时前
css word-spacing属性
前端·css
千叶寻-10 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年15 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天17 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_17 小时前
HTML5(前端基础)
前端·html·html5
Jagger_17 小时前
敏捷开发流程-精简版
前端·后端
FIN666818 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing18 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女12718 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿18 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js