当前位置: 首页 > news >正文

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 反向代理概念 反向代理是指以代理服务器来接收客户端的请求&#xff0c;然后将请求转发给内部网络上的服务器&#xff0c;将从服务器上得到的结果返回给客户端&#xff0c;此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说&#xff0c;反向代理就相当…...

2-112基于matlab的协同干扰功率分配模型

基于matlab的协同干扰功率分配模型&#xff0c;带操作界面的功率分配GUI&#xff0c;可以实现对已有功率的分配优化&#xff0c;可以手动输入参数值。4个干扰山区分二批总干扰功率&#xff0c;每个扇区包括威胁总系数、综合压制概率、目标函数增量等。程序已调通&#xff0c;可…...

数据结构之——二叉树

一、二叉树的基本概念 二叉树是数据结构中的重要概念&#xff0c;每个节点最多有两个子树&#xff0c;分别为左子树和右子树。这种结构具有明确的层次性和特定的性质。 二叉树有五种基本形态&#xff1a; 空二叉树&#xff1a;没有任何节点。只有一个根结点的二叉树&#xff…...

多层感知机(MLP)实现考勤预测二分类任务(sklearn)

1、基础应用&#xff1a; https://blog.csdn.net/qq_36158230/article/details/118670801 多层感知机(MLP)实现考勤预测二分类任务(sklearn) 2、分类器参数&#xff1a;https://scikit-learn.org/dev/modules/generated/sklearn.neural_network.MLPClassifier.html 3、损失函数…...

文件与目录的基本操作

前提&#xff1a;使用su root 切换到权限最大的root用户 1.显示当前工作目录的绝对路径&#xff08;pwd&#xff09; 用途&#xff1a;用于显示当前工作目录的绝对路径的命令。无论用户在文件系统的哪个位置&#xff0c;pwd 命令都能提供当前所在位置的完整路径信息。 用法&a…...

Python入门笔记(三)

文章目录 第八章 字典dict8.1 创建字典&#xff1a;{}、dict()、字典生成式、zip()8.2 获取键对应的值&#xff1a;get()8.3 in&#xff0c; not in判断键是否在字典中8.4 增加键值对&#xff1a;fromkeys()、setdefault()、update()8.5 删除键值对&#xff1a;del语句、clear(…...

PostgreSQL 任意命令执行漏洞(CVE-2019-9193)

记一次授权攻击通过PostgreSql弱口令拿到服务器权限的事件。 使用靶机复现攻击过程。 过程 在信息收集过程中&#xff0c;获取到在公网服务器上开启了5432端口&#xff0c;尝试进行暴破&#xff0c;获取到数据库名为默认postgres&#xff0c;密码为1 随后连接进PostgreSql …...

使用tgz包下载安装clickhouse低版本

1.下载安装包 官方下载地址&#xff1a;https://packages.clickhouse.com/tgz/stable 阿里云下载地址&#xff1a;clickhouse-tgz-stable安装包下载_开源镜像站-阿里云 共需要下载四个文件 clickhouse-common-static-20.3.10.75.tgz clickhouse-common-static-dbg-20.3.10.7…...

外包功能测试干了6个月,技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;23年通过校招进入武汉某软件公司&#xff0c;干了差不多6个月的功能测试&#xff0c;今年中秋&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我就在一个外包企业干了6个月的功…...

动态规划和贪心算法

目录 动态规划和贪心算法 动态规划 贪心算法 两者之间的区别 动态规划和贪心算法 是两种经典的算法设计策略,它们各自具有独特的特点和适用场景。 动态规划 动态规划是一种将复杂问题分解为更简单子问题的求解方法。它特别适用于那些具有重叠子问题和最优子结构特性的问…...

python爬虫--tx动漫完整信息抓取

python爬虫--tx动漫完整信息抓取 一、采集主页信息二、采集详情页信息三、完整代码一、采集主页信息 先看一下采集到的信息,结果保存为csv文件: 打开开发者工具,找到数据接口。 使用xpath提取详情页url。 二、采集详情页信息 如上图所示,使用xpath提取详情页的标题、作…...

《使用Java做爬虫和使用python做爬虫哪个好》

使用Java做爬虫和使用python做爬虫哪个好 Java 和 Python 都是非常出色的编程语言&#xff0c;在爬虫领域各有其优势&#xff0c;具体使用哪种语言更好取决于多种因素&#xff1a; 一、开发效率 1. Python Python 以其简洁、易读的语法而闻名。在爬虫开发中&#xff0c;有许…...

如果我想开发一个APP,需要准备哪些材料呢

开发一个APP需要准备的材料相对复杂&#xff0c;涵盖了公司资质、技术资源、支付接口以及第三方服务等多个方面。以下是一份详细的材料清单&#xff1a; 一、公司资质证明 营业执照&#xff1a;需要提供公司的营业执照副本&#xff0c;用于申请企业支付、域名备案、APP上架及…...

告别论文初稿焦虑!ChatGPT让你轻松完成写作!

AIPaperGPT&#xff0c;论文写作神器~ https://www.aipapergpt.com/ 在面对繁琐的论文写作时&#xff0c;很多人都会遇到无从下手的困惑&#xff0c;尤其是论文初稿阶段&#xff0c;往往需要大量的时间来组织思路和编写内容。然而&#xff0c;随着AI技术的发展&#xff0c;像…...

mongodb 数据迁移,亲测成功!

mysql进行数据迁移&#xff0c;最简单的不过是导出sql&#xff0c;然后在运行sql&#xff0c;数据也自然迁移过去了。 可是mongodb里&#xff0c;我们存储的是文件&#xff0c;是怎么做到的呢&#xff0c;当我在翻阅网上博客的时候&#xff0c;并没有发现有这方面的顾虑。 当…...

如何使用ssm实现疫情居家办公OA系统

TOC 10902ssm疫情居家办公OA系统 系统概述 进过系统的分析后&#xff0c;就开始记性系统的设计&#xff0c;系统设计包含总体设计和详细设计。总体设计只是一个大体的设计&#xff0c;经过了总体设计&#xff0c;我们能够划分出系统的一些东西&#xff0c;例如文件、文档、数…...

深入了解 MySQL 中的 JSON_CONTAINS

深入了解 MySQL 中的 JSON_CONTAINS MySQL 5.7 及更高版本引入了对 JSON 数据类型的支持&#xff0c;使得在数据库中存储和查询 JSON 数据成为可能。在这些新功能中&#xff0c;JSON_CONTAINS 函数是一个非常有用的工具&#xff0c;允许我们检查一个 JSON 文档是否包含特定的值…...

宝藏推荐:精选十款知识库搭建软件

当今这个信息爆炸的时代&#xff0c;高效地管理和利用知识成为了各行各业追求的目标。无论是企业内部的协作&#xff0c;还是对外提供的信息服务&#xff0c;一个强大的知识库都是不可或缺的。为了帮助大家更好地守护和利用知识宝藏&#xff0c;以下是精选的十款知识库搭建软件…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...