React Hooks --- 分享自己开发中常用的自定义的Hooks (1)
为什么要使用自定义 Hooks
自定义 Hooks 是 React 中一种复用逻辑的机制,通过它们可以抽离组件中的逻辑,使代码更加简洁、易读、易维护。它们可以在多个组件中复用相同的逻辑,减少重复代码。
1、useThrottle
代码
import React,{ useRef, useState,useEffect } from "react";/*** useThrottle:一个节流的 hook,用于限制状态更新的频率。** @param {any} initialState 初始状态* @param {number} delay 节流间隔时间,默认为 500 毫秒* @returns {any} 节流后的状态*/
export const useThrottle = (initialState, delay = 5000) => {const [state, setState] = useState(initialState);const timeout = useRef();const nextValue = useRef(null);const hasNextValue = useRef(false);useEffect(() => {if (timeout.current) {nextValue.current = initialState;hasNextValue.current = true;} else {setState(initialState);const timeoutCallback = () => {if (hasNextValue.current) {setState(nextValue.current);hasNextValue.current = false;}timeout.current = undefined;};timeout.current = setTimeout(timeoutCallback, delay);}return () => {timeout.current && clearTimeout(timeout.current);}}, [initialState]);return state;
};
用法
import { useThrottle } from './useThrottle';const value = useThrottle(state, 500);
2、useVirtual
代码
import { useEffect, useState } from 'react';/*** useVirtual:一个虚拟滚动的 hook,用于优化长列表的渲染性能。** @param {object} listRef 列表的引用对象* @param {Array} list 初始列表数据* @param {boolean} isFullScreen 是否全屏显示* @returns {Array} 显示在视图中的列表数据和 padding 样式*/
export const useVirtual = (listRef, list, isFullScreen) => {const origin = list;let viewHeight = null;let itemHeight = 0;let dur = 0;const rootFontSize = parseInt(document.documentElement.style.fontSize);const [viewList, setViewList] = useState(list);const [startIndex, setStartIndex] = useState(0);const [endIndex, setEndIndex] = useState(0);const [padding, setPadding] = useState({paddingTop: 0,paddingBottom: 0,});useEffect(() => {init(listRef);}, []);useEffect(() => {initData(listRef.current);update();}, [startIndex]);function init(ref) {initData(ref.current);render(startIndex, dur + 1);eventBind(ref.current);}function initData(dom) {const target = isFullScreen ? document.documentElement : dom;viewHeight = isFullScreen ? target.offsetHeight : target.parentNode.offsetHeight;itemHeight = target.getElementsByClassName('virtual-item')[0].offsetHeight;dur = Math.floor(viewHeight / itemHeight);}function eventBind(dom) {const eventTarget = isFullScreen ? window : dom.parentNode;eventTarget.addEventListener('scroll', handleScroll, false);}function render(startIndex, endIndex) {setViewList(() => origin.slice(startIndex, endIndex));setEndIndex(() => startIndex + dur + 1);}function handleScroll(e) {e.stopPropagation();const target = isFullScreen ? document.documentElement : listRef.current.parentNode;setStartIndex(() => Math.floor(target.scrollTop / itemHeight));}function update() {if (startIndex === endIndex) return;setEndIndex(() => startIndex + dur);render(startIndex, endIndex);setPadding(() => {return {paddingTop: (startIndex * itemHeight) / rootFontSize,paddingBottom: ((origin.length - endIndex) * itemHeight) / rootFontSize,};});}return [viewList, padding];
};
用法
import { useRef } from 'react';
import { useVirtual } from './useVirtual';const listRef = useRef();
const [viewList, padding] = useVirtual(listRef, initialList, false);
3、useCopyToClipboard
代码
import { message } from 'antd';/*** useCopyToClipboard:一个 hook,用于复制文本到剪贴板。** @returns {Array} 包含单个函数 `handleCopy`,用于复制文本到剪贴板*/
const useCopyToClipboard = () => {function handleCopy(text) {if (text) {let input = document.createElement('input');input.type = 'text';input.value = text;input.style.position = 'fixed';input.style.opacity = '0';document.body.appendChild(input);input.select();if (document.execCommand('copy')) {message.success('复制成功');} else {message.error('复制失败');}document.body.removeChild(input);} else {message.error('复制失败');}}return [handleCopy];
};export default useCopyToClipboard;
用法
import useCopyToClipboard from './useCopyToClipboard';const [handleCopy] = useCopyToClipboard();const copyText = () => {handleCopy('需要复制的文本');
};
4、useSmoothEnter
代码
import { useState, useEffect, useRef } from 'react';/*** useSmoothEnter:一个 hook,在 DOM 元素进入视口时添加平滑的进入动画。** @returns {object} ref - 一个可以附加到 DOM 元素的 ref 对象,用于动画效果*/
const useSmoothEnter = () => {const ref = useRef(null);const [isVisible, setIsVisible] = useState(false);const [animationStyle, setAnimationStyle] = useState({animation: '',animationPlayState: 'paused',});useEffect(() => {const observer = new IntersectionObserver((entries) => {const [entry] = entries;setIsVisible(entry.isIntersecting);});const element = ref.current;if (element) {observer.observe(element);return () => {observer.unobserve(element);};}}, [ref]);useEffect(() => {if (isVisible) {setAnimationStyle({animation: 'enterAnimation 1s ease',animationPlayState: 'running',});}}, [isVisible]);useEffect(() => {const element = ref.current;if (element) {element.style.animation = animationStyle.animation;element.style.animationPlayState = animationStyle.animationPlayState;}}, [animationStyle]);return ref;
};export default useSmoothEnter;
用法
import useSmoothEnter from './useSmoothEnter';const ref = useSmoothEnter();return <div ref={ref} className="animated-element">内容</div>;
相关文章:
React Hooks --- 分享自己开发中常用的自定义的Hooks (1)
为什么要使用自定义 Hooks 自定义 Hooks 是 React 中一种复用逻辑的机制,通过它们可以抽离组件中的逻辑,使代码更加简洁、易读、易维护。它们可以在多个组件中复用相同的逻辑,减少重复代码。 1、useThrottle 代码 import React,{ useRef,…...
uniapp H5页面设置跨域请求
记录一下本地服务在uniapp H5页面访问请求报跨域的错误 这是我在本地起的服务端口号为8088 ip大家可打开cmd 输入ipconfig 查看 第一种方法 在源码视图中配置 "devServer": {"https": false, // 是否启用 https 协议,默认false"port&q…...
使用myCobot280和OAK-D OpenCV DepthAI摄像头制作一个实时脸部跟踪的手机支架!
引言 由于YouTube和Netflix的出现,我们开始躺着看手机。然而,长时间用手拿着手机会让人感到疲劳。这次我们制作了一个可以在你眼前保持适当距离并调整位置的自动移动手机支架,让你无需用手拿着手机。请务必试试! 准备工作 这次我们…...
Xilinx FPGA:vivado关于单端ROM的一个只读小实验
一、实验要求 将生成好的voe文件里的数据使用rom读取出来,采用串口工具发送给电脑(当按键来临时)。 二、程序设计 按键消抖模块: timescale 1ns / 1ps module key_debounce(input sys_clk ,input rst_n…...
集成学习(一)Bagging
前边学习了:十大集成学习模型(简单版)-CSDN博客 Bagging又称为“装袋法”,它是所有集成学习方法当中最为著名、最为简单、也最为有效的操作之一。 在Bagging集成当中,我们并行建立多个弱评估器(通常是决策…...
Docker 中查看及修改 Redis 容器密码的实用指南
在使用 Docker 部署 Redis 容器时,有时我们需要查看或修改 Redis 的密码。本文将详细介绍如何在 Docker 中查看和修改 Redis 容器的密码,帮助你更好地管理和维护你的 Redis 实例。 一、查看 Redis 容器密码 通常在启动 Redis 容器时,我们会…...
CH09_JS的循环控制语句
第9章:Javascript循环控制语句 本章目标 掌握break关键字的使用掌握continue关键字的使用 课程回顾 for循环的特点和语法while循环的特点和语法do-while循环的特点和语法三个循环的区别 讲解内容 1. break关键字 为什么要使用break关键字 生活中,描…...
Python实现Mybatis Plus
Python实现Mybatis Plus from flask import g from sqlalchemy import asc, descclass QueryWrapperBuilder:conditions {}order_by_info {}def __new__(cls, *args, **kwargs):obj super(QueryWrapperBuilder, cls).__new__(cls)return objdef __init__(self, obj):self.o…...
卷积神经网络和Vision Transformer的对比之归纳偏置
卷积神经网络(CNN)和视觉变换器(Vision Transformer,ViT)是两种常用于图像处理的深度学习模型。它们各有优缺点,其中一个重要的区别在于它们对图像数据的“归纳偏置”(inductive bias࿰…...
Java之网络面试经典题(一)
目录 编辑 一.Session和cookie Cookie Session 二.HTTP和HTTPS的区别 三.浅谈HTTPS为什么是安全的? 四.TCP和UDP 五.GET和Post的区别 六.forward 和 redirect 的区别? 本专栏全是博主自己收集的面试题,仅可参考,不能相…...
Failed to download metadata for repo ‘docker-ce-stable‘
这个问题是由于在安装 clamav 和 clamav-update 时,无法下载 Docker CE Stable 库的元数据,可能的原因是网络连接超时或访问该网址受限。以下是一些可能的解决办法: 检查网络连接: 确保服务器的网络连接正常,尤其是与互…...
vant拍摄视频上传以及多张图片上传
数据定义 data() {return {fileList: [],vedioList: [],formData: ,fileTypes: image/png,image/jpeg,image/jpg,image/jpeg,} }, beforeMount() {this.formData new FormData() },拍摄视频上传 <van-uploaderv-if"radio 1"v-model"vedioList"accep…...
如何用手机拍出高级感黑白色调照片?华为Pura70系列XMAGE演绎黑白艺术
在影像的世界里,色彩可以让画面更丰富,更具有表现力,往往也能带来更多的视觉冲击。但有时候,黑白却有着一种独特的魅力。华为Pura 70系列XMAGE黑白风格,则给我们了一把通过纯粹艺术大门的钥匙。 XMAGE黑白并非简单的色…...
Cartographer前后端梳理
0. 简介 最近在研究整个SLAM框架的改进处,想着能不能从Cartographer中找到一些亮点可以用于参考。所以这一篇博客希望能够梳理好Cartographer前后端优化,并从中得到一些启发。carto整体是graph-based框架,前端是scan-map匹配,后端…...
Java面试题系列 - 第3天
题目:Java集合框架详解与高效使用策略 背景说明:Java集合框架是Java标准库的重要组成部分,提供了一系列容器类,如List、Set、Map等,用于存储和操作集合数据。熟练掌握集合框架的使用,对于编写高效、健壮的…...
【Spring Boot】Spring Boot简介
1、概述 Spring Boot是一个用于创建独立、生产级别的基于Spring的应用程序的开发框架。旨在简化Spring应用的初始搭建和开发过程。它通过自动配置和大量默认配置,使得开发者能够快速搭建一个独立的Spring应用,无需进行大量的手动配置。 2、主要特点 快…...
Akamai+Noname强强联合 | API安全再加强
最近,Akamai正式完成了对Noname Security的收购。本文我们将向大家介绍,经过本次收购后,Akamai在保护API安全性方面的后续计划和未来愿景。 Noname Security是市场上领先的API安全供应商之一,此次收购将让Akamai能更好地满足日益增…...
第四届BPAA算法大赛成功举办!共研算法未来
大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的…...
2024第三届中国医疗机器人大会第一轮通知
2024第三届中国医疗机器人大会第一轮通知 大会背景 医疗机器人技术正以前所未有的速度在主流医学领域取得卓越进展,新应用、新技术不断涌现,使得该领域在过去一年中取得了令人惊叹的增长。然而,这仅仅是冰山一角,未来的发展空间仍…...
常见算法和Lambda
常见算法和Lambda 文章目录 常见算法和Lambda常见算法查找算法基本查找(顺序查找)二分查找/折半查找插值查找斐波那契查找分块查找扩展的分块查找(无规律的数据) 常见排序算法冒泡排序选择排序插入排序快速排序递归快速排序 Array…...
自动缩放 win7 远程桌面
https://mremoteng.org/download 用这个软件,下载 zip 版,不需要管理员权限 在这里找到的,选票最高的一个就是 https://superuser.com/questions/1030041/remote-desktop-zoom-and-full-screen-how-win10-remote-win7-2008-2003-ho...
微机原理与单片机 知识体系梳理
单片机笔记分享 我个人感觉单片机要记的东西很多,也很琐碎,特别是一些位、寄存器以及相关作用等,非常难以记忆。因此复习时将知识点整理在了一起做成思维导图,希望对大家有所帮助。内容不是很多,可能有些没覆盖全&…...
低音炮内存卡格式化后无法播放音乐文件
试了多次 不支持ntfs不支持exfat 仅支持fat32 FAT32与exFAT的区别主要体现在来源、单个文件限制、适用情况以及兼容性方面。12 来源: FAT32是Windows平台的传统文件格式,首次在Windows 95第二版中引入,旨在取代FAT16,具有良好的…...
手动将dingtalk-sdk-java jar包打入maven本地仓库
有时候,中央镜像库不一定有自己需要的jar包,这时候我们就需要用到该方法,将jar打入maven本地仓库,然后项目中,正常使用maven的引入规则。 mvn install:install-file -Dmaven.repo.local=D:\software\maven\apache-maven-3.6.3-bin\apache-maven-3.6.3\repo -DgroupId=ding…...
C++:构造函数是什么东西
一、构造函数是什么 在C中,构造函数是一种特殊成员函数,它有一下几个明显的特征: 1、它自动在创建新对象时被调用。 2、其名称与类名相同, 3、没有返回类型, 4、通常没有参数(除了默认情况下的隐式thi…...
工作两年后,我如何看待设计模式
在软件工程中,设计模式是经过反复验证的最佳实践,用于解决在软件设计中经常遇到的一类问题。它们为开发者提供了一种通用的解决方案和语言,使得复杂的编程问题得以简化,代码结构更加清晰,可维护性大大提高。简而言之&a…...
01 Web基础与HTTP协议
1、域名和DNS 1.1 域名的概念 如果说一个主机,没有名字也可以完全用IP来代替,但是IP地址不好记忆。例如说,我们记一些网站的名称百度、新浪、搜狐等很好记,但是如果要去记百度的IP、新浪的IP、以及搜狐的IP地址,那将会…...
Java求自然常数e的近似值(课堂实例1)
❤❤引言🎃🎃 ❤点关注编程梦想家(大学生版)-CSDN博客不迷路~~~~~~❤ 自然常数 𝑒e 是数学中一个非常重要的常数,约等于 2.71828,它在自然对数、复合利息计算等领域有着广泛的应用。本文将介绍如…...
简过网:什么是咨询工程师?我不允许还有人不知道!
咨询工程师真的有必要考吗?近期小编收到很多关于咨询工程师的的问题,今天,小编给大家整理汇总了一下关于咨询工程师的相关问题,希望能够帮助到大家! 一、什么是咨询工程师? 咨询工程师是从事工程咨…...
数据泄露时代的安全之道:访问认证的重要性
引言 想象一下:你一觉醒来,收到一条通知——你的公司遭遇了数据泄露。你感到恐惧,因为这意味着客户数据被曝光,公司声誉受损,还有巨额罚款在等着你。在当今的数字化环境中,这种情况太常见了。全球各地的组…...
XLSX + LuckySheet + LuckyExcel + Web Worker实现前端的excel预览
文章目录 功能简介简单代码实现web worker 版本效果参考 功能简介 通过LuckyExcel的transformExcelToLucky方法, 我们可以把一个文件直接转成LuckySheet需要的json字符串, 之后我们就可以用LuckySheet预览excelLuckyExcel只能解析xlsx格式的excel文件&a…...
Java版本迭代的过程(Java面经)
Java 5: 泛型与注解 泛型:使得Web应用可以编写更加类型安全的代码,特别是在处理各种数据结构时,如集合框架的使用。注解:极大地简化了配置管理,Spring框架的崛起得益于Java 5的注解支持,使得依赖注入和AOP…...
深入了解java锁升级可以应对各种疑难问题
对于java锁升级,很多人都停留在比较浅层的表面理解,一定程度下也许够用,但如果学习其中的细节,我们更好地理解多线程并发时各种疑难问题的应对方式! 因此我将锁升级过程中可能涉及的大部分细节或者疑问都整合成了一篇…...
C++初学者指南-4.诊断---基础:警告和测试
C初学者指南-4.诊断—基础知识:警告和测试 文章目录 C初学者指南-4.诊断---基础知识:警告和测试1. 术语和技术记住:使用专用类型! 2.编译器警告Gcc/CLang 编译器选项MS Visual Studio 编译器选项 3.断言运行时断言静态断言&#x…...
docker使用镜像jms_all部署jumpserver
创建容器需要挂载出来的服务器对应目录 mkdir -p /data/redis/data mkdir -p /opt/mysql/{data,conf,logs}docker安装redis docker run -d -it --name redis -p 6379:6379 -v /data/redis/data:/data --restart=always...
在Java项目中集成单元测试与覆盖率工具
在Java项目中集成单元测试与覆盖率工具 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 单元测试是软件开发中至关重要的一环,它用于验证代码在独立…...
CTF实战:从入门到提升
CTF实战:从入门到提升 🚀前言 没有网络安全就没有国家安全,网络安全不仅关系到国家整体信息安全,也关系到民生安全。近年来,随着全国各行各业信息化的发展,网络与信息安全得到了进一步重视,越…...
Spring Boot集成olingo快速入门demo
1.什么是olingo? Apache Olingo 是个 Java 库,用来实现 Open Data Protocol (OData)。 Apache Olingo 包括服务客户端和 OData 服务器方面。 Open Data Protocol (开放数据协议,OData) 是用来查询和更新数据的一种W…...
GPT对话代码库——HAL库下 USART 的配置及问题(STM32G431CBT6)
目录 1,问: 1,答: 示例代码 正确的HAL库初始化方式 自定义初始化方式(不推荐) 总结 2,问: 2,答: 代码详细解释 初始部分 主初始化部分 初始化调用…...
ExoPlayer架构详解与源码分析(14)——ProgressiveMediaPeriod
系列文章目录 ExoPlayer架构详解与源码分析(1)——前言 ExoPlayer架构详解与源码分析(2)——Player ExoPlayer架构详解与源码分析(3)——Timeline ExoPlayer架构详解与源码分析(4)—…...
docker部署kafka(单节点) + Springboot集成kafka
环境: 操作系统:win10 Docker:Docker Desktop 4.21.1 (114176)、Docker Engine v24.0.2 SpringBoot:2.7.15 步骤1:创建网络: docker network create --subnet172.18.0.0/16 net-kafka 步骤2:安…...
一.1.(3)半导体二极管基本电路的分析方法及常见应用电路
1.二极管基本电路的分析方法 先标正负极,再看是否理想二极管 将二极管视为断路,求两端电压 两端电压均大于导通电压,压差大的先导通(由于电源不是完全的阶跃,而是有一个电压爬升的过程) 2.常见应用电路 1.求…...
银河麒麟V10 SP1 审计工具 auditd更新
前言 银河麒麟V10 SP1 审计工具 auditd 引发的内存占用过高, 内存使用率一直在 60% 以上, 内存一直不释放 排查 可以使用ps或者top查看系统进程使用情况 ps -aux|sort -k4nr|head -n 5 发现银河麒麟审计工具 auditd 一直占用内存不释放 解决 办法一…...
JWT(Json Web Token)在.NET Core中的使用
登录成功时生成JWT字符串目录 JWT是什么? JWT的优点: JWT在.NET Core 中的使用 JWT是什么? JWT把登录信息(也称作令牌)保存在客户端为了防止客户端的数据造假,保存在客户端的令牌经过了签名处理…...
《QT从基础到进阶·四十三》QPlugin插件多线程问题和只有插件dll没有头文件和lib文件时调用插件中的方法
1、插件和多线程问题: 创建插件对象不能放到多线程执行,不然报错:ASSERT failure in QWidget: "Widgets must be created in the GUlthread. //不能放在多线程执行 QPluginLoader pluginLoader(pluginsDir.absoluteFilePath(fileName))…...
Android SurfaceFlinger——屏幕状态初始化(二十二)
对于开机启动动画前期准备的相关步骤,我们已经分析了前 5 个,对于第 6 步调用 eglGetDisplay() 函数对 OpenGL ES 初始化并获取默认屏幕,我们在介绍 OpenGL ES 的时候也进行了详细的分析,下一步我们我们来分析对屏幕的状态进行初始化。 1)getInternalDisplayToken:获取显…...
3101. 交替子数组计数 Medium
给你一个 二进制数组 nums 。 如果一个 子数组 中 不存在 两个 相邻 元素的值 相同 的情况,我们称这样的子数组为 交替子数组 。 返回数组 nums 中交替子数组的数量。 示例 1: 输入: nums [0,1,1,1] 输出: 5 解释&…...
Linux系统基础命令行指令——Ubuntu
基础指令 更新指令 sudo apt update sudo apt upgrade 切换超级管理员 su root 切换路径 //相对、绝对 cd 路径回上一级路径 cd ..cd ../.. 退两级路径 查看当前目录 pwd查看指定路径内容 ls //常见搭配 ls -al 创建目录 mkdir 路径 创建文件 touc…...
qt 读取配置文件
在Qt中读取配置文件,主要有以下几种方法: 使用QFile和QTextStream类: 这种方法适用于读取任意文本文件,包括配置文件。使用QFile的open()方法打开配置文件。使用QTextStream的readLine()方法逐行读取配置数据。使用QXmlStreamRea…...
拉格朗日插值法【python,算法】
拉格朗日插值是一种在数值分析中用来构建通过一系列已知数据点的多项式插值的方法。这种方法以 18 世纪的法国数学家约瑟夫拉格朗日命名。当给定一组离散的数据点(𝑥_0,𝑦_0),(𝑥_1,𝑦_1),...,(𝑥_𝑛,&…...