react 封装防抖
封装防抖
import React, { useRef, useEffect, useCallback } from 'react';function useDebounce(fn, delay) {const delayRef = useRef(delay);const fnRef = useRef(fn);// 更新ref值useEffect(() => {delayRef.current = delay;}, [delay]);useEffect(() => {fnRef.current = fn;}, [fn]);const debounced = useRef();// 防抖函数const debounce = useCallback((...args) => {const later = () => {debounced.current = null;};clearTimeout(debounced.current);debounced.current = setTimeout(() => {fnRef.current(...args);later();}, delayRef.current);}, []);useEffect(() => () => {clearTimeout(debounced.current);},[]);return debounce;
}export default useDebounce;
使用方法
import React, { useState } from 'react';
import useDebounce from './useDebounce';const MyComponent = () => { // 创建防抖函数const debouncedHandleChange = useDebounce(() => {console.log('防抖触发了');}, 500);return (<inputtype="text"value={value}onChange={(e) => {debouncedHandleChange(e);}}/>);
};export default MyComponent;
注:本人前端小白 ,如有不对的地方还请多多指教
相关文章:
react 封装防抖
封装防抖 import React, { useRef, useEffect, useCallback } from react;function useDebounce(fn, delay) {const delayRef useRef(delay);const fnRef useRef(fn);// 更新ref值useEffect(() > {delayRef.current delay;}, [delay]);useEffect(() > {fnRef.current…...
Java项目-----图形验证码登陆实现
原理: 验证码在前端显示,但是是在后端生成, 将生成的验证码存入redis,待登录时,前端提交验证码,与后端生成的验证码比较. 详细解释: 图形验证码的原理(如下图代码).前端发起获取验证码的请求后, 1 后端接收请求,生成一个键key(随机的键) 然后生成一个验证码作为map的valu…...
【网络代理模块】反向代理(上)
1 概念 1.1 反向代理概念 反向代理是指以代理服务器来接收客户端的请求,然后将请求转发给内部网络上的服务器,将从服务器上得到的结果返回给客户端,此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说,反向代理就相当…...
2-112基于matlab的协同干扰功率分配模型
基于matlab的协同干扰功率分配模型,带操作界面的功率分配GUI,可以实现对已有功率的分配优化,可以手动输入参数值。4个干扰山区分二批总干扰功率,每个扇区包括威胁总系数、综合压制概率、目标函数增量等。程序已调通,可…...
数据结构之——二叉树
一、二叉树的基本概念 二叉树是数据结构中的重要概念,每个节点最多有两个子树,分别为左子树和右子树。这种结构具有明确的层次性和特定的性质。 二叉树有五种基本形态: 空二叉树:没有任何节点。只有一个根结点的二叉树ÿ…...
多层感知机(MLP)实现考勤预测二分类任务(sklearn)
1、基础应用: https://blog.csdn.net/qq_36158230/article/details/118670801 多层感知机(MLP)实现考勤预测二分类任务(sklearn) 2、分类器参数:https://scikit-learn.org/dev/modules/generated/sklearn.neural_network.MLPClassifier.html 3、损失函数…...
文件与目录的基本操作
前提:使用su root 切换到权限最大的root用户 1.显示当前工作目录的绝对路径(pwd) 用途:用于显示当前工作目录的绝对路径的命令。无论用户在文件系统的哪个位置,pwd 命令都能提供当前所在位置的完整路径信息。 用法&a…...
Python入门笔记(三)
文章目录 第八章 字典dict8.1 创建字典:{}、dict()、字典生成式、zip()8.2 获取键对应的值:get()8.3 in, not in判断键是否在字典中8.4 增加键值对:fromkeys()、setdefault()、update()8.5 删除键值对:del语句、clear(…...
PostgreSQL 任意命令执行漏洞(CVE-2019-9193)
记一次授权攻击通过PostgreSql弱口令拿到服务器权限的事件。 使用靶机复现攻击过程。 过程 在信息收集过程中,获取到在公网服务器上开启了5432端口,尝试进行暴破,获取到数据库名为默认postgres,密码为1 随后连接进PostgreSql …...
使用tgz包下载安装clickhouse低版本
1.下载安装包 官方下载地址:https://packages.clickhouse.com/tgz/stable 阿里云下载地址:clickhouse-tgz-stable安装包下载_开源镜像站-阿里云 共需要下载四个文件 clickhouse-common-static-20.3.10.75.tgz clickhouse-common-static-dbg-20.3.10.7…...
外包功能测试干了6个月,技术退步太明显了。。。。。
先说一下自己的情况,本科生,23年通过校招进入武汉某软件公司,干了差不多6个月的功能测试,今年中秋,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我就在一个外包企业干了6个月的功…...
动态规划和贪心算法
目录 动态规划和贪心算法 动态规划 贪心算法 两者之间的区别 动态规划和贪心算法 是两种经典的算法设计策略,它们各自具有独特的特点和适用场景。 动态规划 动态规划是一种将复杂问题分解为更简单子问题的求解方法。它特别适用于那些具有重叠子问题和最优子结构特性的问…...
python爬虫--tx动漫完整信息抓取
python爬虫--tx动漫完整信息抓取 一、采集主页信息二、采集详情页信息三、完整代码一、采集主页信息 先看一下采集到的信息,结果保存为csv文件: 打开开发者工具,找到数据接口。 使用xpath提取详情页url。 二、采集详情页信息 如上图所示,使用xpath提取详情页的标题、作…...
《使用Java做爬虫和使用python做爬虫哪个好》
使用Java做爬虫和使用python做爬虫哪个好 Java 和 Python 都是非常出色的编程语言,在爬虫领域各有其优势,具体使用哪种语言更好取决于多种因素: 一、开发效率 1. Python Python 以其简洁、易读的语法而闻名。在爬虫开发中,有许…...
如果我想开发一个APP,需要准备哪些材料呢
开发一个APP需要准备的材料相对复杂,涵盖了公司资质、技术资源、支付接口以及第三方服务等多个方面。以下是一份详细的材料清单: 一、公司资质证明 营业执照:需要提供公司的营业执照副本,用于申请企业支付、域名备案、APP上架及…...
告别论文初稿焦虑!ChatGPT让你轻松完成写作!
AIPaperGPT,论文写作神器~ https://www.aipapergpt.com/ 在面对繁琐的论文写作时,很多人都会遇到无从下手的困惑,尤其是论文初稿阶段,往往需要大量的时间来组织思路和编写内容。然而,随着AI技术的发展,像…...
mongodb 数据迁移,亲测成功!
mysql进行数据迁移,最简单的不过是导出sql,然后在运行sql,数据也自然迁移过去了。 可是mongodb里,我们存储的是文件,是怎么做到的呢,当我在翻阅网上博客的时候,并没有发现有这方面的顾虑。 当…...
如何使用ssm实现疫情居家办公OA系统
TOC 10902ssm疫情居家办公OA系统 系统概述 进过系统的分析后,就开始记性系统的设计,系统设计包含总体设计和详细设计。总体设计只是一个大体的设计,经过了总体设计,我们能够划分出系统的一些东西,例如文件、文档、数…...
深入了解 MySQL 中的 JSON_CONTAINS
深入了解 MySQL 中的 JSON_CONTAINS MySQL 5.7 及更高版本引入了对 JSON 数据类型的支持,使得在数据库中存储和查询 JSON 数据成为可能。在这些新功能中,JSON_CONTAINS 函数是一个非常有用的工具,允许我们检查一个 JSON 文档是否包含特定的值…...
宝藏推荐:精选十款知识库搭建软件
当今这个信息爆炸的时代,高效地管理和利用知识成为了各行各业追求的目标。无论是企业内部的协作,还是对外提供的信息服务,一个强大的知识库都是不可或缺的。为了帮助大家更好地守护和利用知识宝藏,以下是精选的十款知识库搭建软件…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
微服务通信安全:深入解析mTLS的原理与实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言:微服务时代的通信安全挑战 随着云原生和微服务架构的普及,服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...
echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式
pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图,如果边框加在dom上面,pdf-lib导出svg的时候并不会导出边框,所以只能在echarts图上面加边框 grid的边框是在图里…...
js 设置3秒后执行
如何在JavaScript中延迟3秒执行操作 在JavaScript中,要设置一个操作在指定延迟后(例如3秒)执行,可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法,它接受两个参数: 要执行的函数&…...
stm32进入Infinite_Loop原因(因为有系统中断函数未自定义实现)
这是系统中断服务程序的默认处理汇编函数,如果我们没有定义实现某个中断函数,那么当stm32产生了该中断时,就会默认跑这里来了,所以我们打开了什么中断,一定要记得实现对应的系统中断函数,否则会进来一直循环…...
