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 分钟前
《社交应用动态表情:RN与Flutter实战解码》
javascript·flutter·react native
明似水27 分钟前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter
沐土Arvin33 分钟前
前端图片上传组件实战:从动态销毁Input到全屏预览的全功能实现
开发语言·前端·javascript
ZHOU_WUYI1 小时前
React与Docker中的MySQL进行交互
mysql·react.js·docker
Zww08911 小时前
el-dialog鼠标在遮罩层松开会意外关闭,教程图文并茂
javascript·vue.js·计算机外设
爱编程的鱼1 小时前
C#接口(Interface)全方位讲解:定义、特性、应用与实践
java·前端·c#
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 页面布局 与 Vue Router 路由配置
前端·javascript·vue.js·tailwindcss
saadiya~2 小时前
Vue 3 实现后端 Excel 文件流导出功能(Blob 下载详解)
前端·vue.js·excel
摇摇奶昔x3 小时前
webpack 学习
前端·学习·webpack