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

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...

基于 HTTP 的单向流式通信协议SSE详解

SSE&#xff08;Server-Sent Events&#xff09;详解 &#x1f9e0; 什么是 SSE&#xff1f; SSE&#xff08;Server-Sent Events&#xff09; 是 HTML5 标准中定义的一种通信机制&#xff0c;它允许服务器主动将事件推送给客户端&#xff08;浏览器&#xff09;。与传统的 H…...

接口 RESTful 中的超媒体:REST 架构的灵魂驱动

在 RESTful 架构中&#xff0c;** 超媒体&#xff08;Hypermedia&#xff09;** 是一个核心概念&#xff0c;它体现了 REST 的 “表述性状态转移&#xff08;Representational State Transfer&#xff09;” 的本质&#xff0c;也是区分 “真 RESTful API” 与 “伪 RESTful AP…...

Linux入门(十五)安装java安装tomcat安装dotnet安装mysql

安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了&#xff0c;系统很多命…...