当前位置: 首页 > 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;以下是精选的十款知识库搭建软件…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...