React监听窗口宽度变化 触发resize(Hooks版本)

需求场景:

项目中有些样式,需要监听窗口大小更改,做一些自适应处理

Code:

    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)}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/598732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux第18步_安装“Ubuntu系统下的C语言编译器GCC”

Ubuntu系统没有提供C/C的编译环境&#xff0c;因此还需要手动安装build-essential软件包&#xff0c;它包含了 GNU 编辑器&#xff0c;GNU 调试器&#xff0c;和其他编译软件所必需的开发库和工具。本节用于重点介绍安装“Ubuntu系统下的C语言编译器&#xff27;&#xff23;&a…

电子化学品,预计2025年会增长到4302亿美元

电子化学品市场是一个庞大的细分市场&#xff0c;它包括了广泛的化学品种类&#xff0c;如涂料、塑料、精细化学品、农药和医药等。这个市场的发展相当迅速&#xff0c;下面我们将从全球市场和中国市场两个方面对其发展趋势进行分析。全球市场分析&#xff1a; 从全球市场的角度…

Redis命令---List篇

目录 1.Redis Lindex 命令 - 通过索引获取列表中的元素简介语法可用版本: > 1.0.0返回值: 列表中下标为指定索引值的元素。 如果指定索引值不在列表的区间范围内&#xff0c;返回 nil 。 示例 2.Redis Rpush 命令 - 在列表中添加一个或多个值简介语法可用版本: > 1.0.0返…

[C#]利用opencvsharp实现深度学习caffe模型人脸检测

【官方框架地址】 https://github.com/opencv/opencv/blob/master/samples/dnn/face_detector/deploy.prototxt 采用的是官方caffe模型res10_300x300_ssd_iter_140000.caffemodel进行人脸检测 【算法原理】 使用caffe-ssd目标检测框架训练的caffe模型进行深度学习模型检测 …

ubuntu 22.04 快速安装Odoo17.0详记

序言:时间是我们最宝贵的财富,珍惜手上的每个时分 如果为阿里云或者腾讯云&#xff0c;第一步可以忽略 1.更换阿里云源 第一步&#xff1a;先备份下原始源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup 第二步&#xff1a;修改文件 sudo cp /etc/apt/sou…

ubuntu18 安装使用免费tor海外代理

安装tor&#xff0c;中间询问&#xff0c;输入y apt-get install tor找到tor配置文件 find / -name torrc打开配置文件&#xff0c;去掉ControlPort 9051这行前面的注释&#xff0c;保存退出 ## The port on which Tor will listen for local connections from Tor ## contr…

最常用的自动化测试框架汇总

在开始学习python自动化测试之前&#xff0c;先了解目前市场上的自动化测试框架有哪些&#xff1f; 随着技术的不断迭代更新&#xff0c;优胜劣汰也同样发展下来。从一开始工具型自动化&#xff0c;到现在的框架型&#xff1b;从一开始的能用&#xff0c;到现在的不仅能用&…

python中的//

在Python中&#xff0c;a // b 表示整除运算符&#xff0c;用于将 a 除以 b 并向下取整得到商的结果。 例如&#xff1a; a 10 b 3 result a // b print(result) 输出结果为: 3 在上述示例中&#xff0c;a 被除以 b&#xff0c;即 10 除以 3&#xff0c;结果为 3.33333…

app广告变现——广告预加载机制,提升用户体验

通过广告预加载&#xff0c;开发者可以避免在向用户显示广告时出现延迟。 应用在程序启动时需要请求网络&#xff0c;加载资源会需要等待时间&#xff0c;如果在等待过程中没有及时给用户展现画面或反馈&#xff0c;用户很可能会因为等待时间过长而推出应用。广告预加载在此时…

Ansibe自动化基础

目录 一.Ansibe自动化概述 1.特点 2.工作特性 3.应用场合 二.ansibe安装即相关文件说明 1.安装 2.相关文件 3.主配置文件内容详解 4.ansibe运行机制 三.ansibe管理节点命令 1.Ansibe 四.主机组配置 1.基本配置 第一种&#xff1a; 第二种&#xff1a; 2.设置SSH…

「解析」Windows 如何优雅使用 Terminal

所谓工欲善其事必先利其器&#xff0c;对于开发人员 Linux可能是首选&#xff0c;但是在家学习的时候&#xff0c;我还是更喜欢使用 Windows系统&#xff0c;首先是稳定&#xff0c;其次是习惯了。当然了&#xff0c;我还有一台专门安装 Linux系统的小主机用于学习Linux使用&am…

从技术角度分析:HTTP 和 HTTPS 有何不同

网络安全问题正变得日益重要&#xff0c;而 HTTP 与 HTTPS 对用户数据的保护十分关键。本文将深入探讨这两种协议的特点、工作原理&#xff0c;以及保证数据安全的 HTTPS 为何变得至关重要。 认识 HTTP 与 HTTPS HTTP 的工作原理 HTTP&#xff0c;全称超文本传输协议&#xf…

2024年我国网络安全发展形势展望

2023年&#xff0c;我国网络安全政策法规陆续出台&#xff0c;网络安全与数据安全产业发展势头强劲&#xff0c;网络安全形势整体向好。展望2024年&#xff0c;世界各国在网络空间中的竞争将变得愈发激烈&#xff0c;我国网络安全领域的法律法规将不断完善&#xff0c;数据安全…

Hive 源码

hive 编译 issue Failed to execute goal com.github.os72:protoc-jar-maven-plugin:3.5.1.1:run (default) on project hive-standalone-metastore: Error resolving artifact: com.google.protobuf:protoc:2.5.0: The following artifacts could not be resolved: com.goog…

test coverate-03-测试覆盖率 EMMA 一款免费的Java代码覆盖工具 emma 和 jacoco 对比

拓展阅读 test 系统学习-04-test converate 测试覆盖率 jacoco 原理介绍 test 系统学习-05-test jacoco 测试覆盖率与 idea 插件 test 系统学习-06-test jacoco EMMA&#xff1a;一款免费的Java代码覆盖工具 免费的代码覆盖&#xff1a;一项基本自由&#xff1f; 直到最近…

h2-use the recovery tool [90030-200]

use the recovery tool [90030-200] 背景 使用flowable-ui版本为6.7.1使用默认的H2数据库&#xff0c;在使用此版本之前使用的是7.0.0版本&#xff0c;也就是使用两个版本&#xff0c;启动后一个版本时启动不了&#xff0c;控制台报错&#xff1a;如下 org.h2.jdbc.JdbcSQLN…

超好玩的烧脑当当狸智能五子棋,锻炼孩子的超级大脑

数码时代&#xff0c;儿童沉迷于电子设备和网络游戏已经成为了常态 作为家长&#xff0c;我们都希望能够找到一种&#xff0c;既有趣又益于孩子成长发展的娱乐方式 ✨「当当狸智能五子棋」&#xff0c;儿童智力成长的好帮手学玩一体锻炼儿童思维 不仅是一种新型休闲娱乐的方…

支付系统的层级结构与设计原则

支付系统是现代商业活动中的关键组件&#xff0c;它不仅需要处理各种复杂的金融交易&#xff0c;还要确保交易的安全性和便捷性。为了满足这些需求&#xff0c;支付系统通常采用分层的架构设计&#xff0c;每一层都有其特定的功能和责任。本文将探讨构建一个有效的支付系统时需…

Linux第4步_安装VMwareTools

安装Ubuntu操作系统后&#xff0c;就可以安装VMwareTools了&#xff0c;目的是实现“电脑和虚拟机之间互相复制粘贴文件”。 1、双击桌面图标“VMware Workstation Pro”&#xff0c;然后点击下图中的“开机”&#xff0c;打开虚拟机电源。 2、双击下图中的用户名“zgq” 3、…

【算法】数据结构题单练习(寒假正在更新中)

1. 最小距离和&#xff08;树的重心&#xff09; 题目&#xff1a; http://oj.daimayuan.top/course/7/problem/529 #include<bits/stdc.h> using namespace std;typedef long long ll;const int N 2e55; const int inf 0x3f3f3f3f;int n; int pre[N]; int dist[N]; …