React 防抖与节流用法

在React中,防抖和节流是优化性能和提升用户体验的常用技术。下面是它们的用法:

  1. 防抖(Debounce):
    防抖是指在某个事件触发后,等待一段时间后执行回调函数。如果在等待时间内再次触发该事件,将重新计时。这样可以避免频繁触发事件导致性能问题。

在React中使用防抖的常见场景是处理输入框的搜索功能。当用户输入时,我们可以设置一个延迟时间,只有在用户停止输入一段时间后才触发搜索请求。

以下是使用Lodash库中的debounce函数来实现防抖的示例代码:

import React, { useState } from 'react';
import { debounce } from 'lodash';const SearchBox = () => {const [searchTerm, setSearchTerm] = useState('');const handleSearch = debounce((value) => {// 处理搜索逻辑console.log(value);}, 500);const handleChange = (event) => {const { value } = event.target;setSearchTerm(value);handleSearch(value);};return (<input type="text" value={searchTerm} onChange={handleChange} />);
};export default SearchBox;

在上面的代码中,我们使用debounce函数将handleSearch函数包装起来,设置了500毫秒的延迟时间。每次用户输入时,handleChange函数会更新searchTerm的值,并调用handleSearch函数。但是,由于防抖的作用,只有在用户停止输入500毫秒后,才会执行真正的搜索逻辑。

  1. 节流(Throttle):
    节流是指在某个事件触发后,固定时间间隔内只执行一次回调函数。这样可以控制事件触发的频率,避免过多的计算和请求。

在React中使用节流的常见场景是处理滚动事件或窗口调整大小事件。当用户频繁滚动页面或调整窗口大小时,我们可以设置一个固定的时间间隔,只在该时间间隔内执行一次回调函数。

以下是使用Lodash库中的throttle函数来实现节流的示例代码:

import React, { useEffect } from 'react';
import { throttle } from 'lodash';const ScrollComponent = () => {const handleScroll = throttle(() => {// 处理滚动逻辑console.log('Scrolling...');}, 200);useEffect(() => {window.addEventListener('scroll', handleScroll);return () => {window.removeEventListener('scroll', handleScroll);};}, [handleScroll]);return (<div>Scrollable Content</div>);
};export default ScrollComponent;

在上面的代码中,我们使用throttle函数将handleScroll函数包装起来,设置了200毫秒的时间间隔。每次滚动事件触发时,handleScroll函数会被调用,但是由于节流的作用,只有在200毫秒内第一次滚动事件触发时,才会真正执行滚动逻辑。

请注意,以上示例代码中使用了Lodash库来提供防抖和节流的函数。你可以使用其他类似的库或自己实现防抖和节流的逻辑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

upload-labs1-21关文件上传通关手册

upload-labs文件上传漏洞靶场 目录 upload-labs文件上传漏洞靶场第一关pass-01&#xff1a;第二关Pass-02第三关pass-03&#xff1a;第四关pass-04&#xff1a;第五关pass-05&#xff1a;第六关pass-06&#xff1a;第七关Pass-07第八关Pass-08第九关Pass-09第十关Pass-10第十一…

苹果手机远程控制安卓手机,为什么不能发起控制?

这位用户想要用iOS设备远程控制安卓设备&#xff0c;在被控端安装好AirDroid之后&#xff0c;就在控制端的苹果手机上也安装了AirDroid&#xff0c;然而打开控制端的软件&#xff0c;却没有在手机界面上看到【远程控制】按钮&#xff0c;于是提出了以上疑问。 解答 想要让iOS设…

自动驾驶:轨迹预测综述

自动驾驶&#xff1a;轨迹预测综述 轨迹预测的定义轨迹预测的分类基于物理的方法&#xff08;Physics-based&#xff09;基于机器学习的方法&#xff08;Classic Machine Learning-based&#xff09;基于深度学习的方法&#xff08;Deep Learning-based&#xff09;基于强化学习…

用postman 推送消息到GCP的pubsub

创建1个Topic 和 2个 subscription 我们可以用terraform 去创建1个topic 和 2个subscriptions # topic resource "google_pubsub_topic" "topic_a" {name "TopicA"project var.project_id }# subscriptions resource "google_pubsub_s…

【AIGC专题】Stable Diffusion 从入门到企业级实战0402

一、概述 本章是《Stable Diffusion 从入门到企业级实战》系列的第四部分能力进阶篇《Stable Diffusion ControlNet v1.1 图像精准控制》第02节&#xff0c; 利用Stable Diffusion ControlNet Openpose模型精准控制图像生成。上一节&#xff0c;我们介绍了《Stable Diffusion C…

numpy详解

Numpy 简介 Numpy&#xff08;Numerical Python&#xff09;是一个在Python领域做数值计算非常重要的库&#xff0c; Pandas、Matplotlib、Statmodels、Scikit-learn和其它一些科学计算库都依赖Numpy 也就是说有时候你可能没有直接import numpy as np&#xff0c;但是却在背后…

Spring Bean的获取方式

参考https://juejin.cn/post/7251780545972994108?searchId2023091105493913AF7C1E3479BB943C80#heading-12 记录并补充 1.通过BeanFactoryAware package com.toryxu.demo1.beans;import org.springframework.beans.BeansException; import org.springframework.beans.facto…

postgresql-通用表达式

postgresql-通用表达式 入门案例简单CTE递归 CTE案例1案例2 入门案例 -- 通用表达式 with t(n) as (select 2) select * from t;简单CTE WITH cte_name (col1, col2, ...) AS (cte_query_definition ) sql_statement;WITH 表示定义 CTE&#xff0c;因此 CTE 也称为 WITH 查询…

【Unity】rotation和Quaternion学习笔记

1.rotation 赋值 Quaternion可以为transform.rotation 赋值 2. 从正轴面向原点&#xff0c;顺时针旋转&#xff0c;角度正增加 正x轴面向原点&#xff0c;顺时针旋转&#xff0c;z正轴往下&#xff0c;rotation的x正增加。 3.rotation和Quaternion的关系 1.查询 2.实践 旋转…

LVS DR模式负载均衡群集部署

目录 1 LVS-DR 模式的特点 1.1 数据包流向分析 1.2 DR 模式的特点 2 DR模式 LVS负载均衡群集部署 2.1 配置负载调度器 2.1.1 配置虚拟 IP 地址 2.1.2 调整 proc 响应参数 2.1.3 配置负载分配策略 2.2 部署共享存储 2.3 配置节点服务器 2.3.1 配置虚拟 IP 地址 2.3.2…

树形控件加自定义图标样式及指引线

记录一下留用&#xff0c;有错误请指正。 效果图如下&#xff1a; 自定义图标及指引线 代码&#xff1a; <div class"head-container" style"margin-left: -15px;"><el-tree icon-class"none"style"height:100%; overflow-y: h…

flutter 网络地址URL转file

方法1 import dart:io; import package:http/http.dart as http; import package:path/path.dart; import package:path_provider/path_provider.dart;Future<File> _fileFromImageUrl() async {final response await http.get(Uri.parse(https://example.com/xyz.jpg)…

滚动菜单 flutter

想实现这个功能&#xff1a; 下面的代码可以实现&#xff1a; import package:flutter/material.dart;void main() > runApp(MyApp());class MyApp extends StatelessWidget {static const String _title Flutter Code Sample;overrideWidget build(BuildContext context)…

vcruntime140_1.dll修复的方法大全,缺失vcruntime140_1.dll解决方法分享

vcruntime140_1.dll这个文件在电脑里属于挺重要的一个文件&#xff0c;一但它缺失了&#xff0c;那么很多程序都是运行不了的&#xff0c;今天我们就来讲解一下这个vcruntime140_1.dll修复以及它的一些作用和属性。 一.vcruntime140_1.dll的作用 vcruntime140_1.dll是Microso…

在MAC电脑上将NTFS格式移动硬盘转换为ExFAT格式

注意&#xff1a;转化之前先将移动硬盘中的内容进行备份 1、点击桌面上的【前往】&#xff0c;选择【实用工具】 2、在列表中选择【磁盘工具】 3、在左侧选中你的磁盘&#xff0c;点击右侧上方的【抹掉】,注意&#xff1a;将永久抹掉储存在上面的所有数据&#xff0c;因此需要…

Kubernetes入门 十五、高级调度

目录 定向调度nodeName&#xff08;不建议&#xff09;nodeSelector 亲和性调度nodeAffinitypodAffinity 和 podAntiAffinity 容忍和污点污点容忍 定向调度 定向调度&#xff0c;指的是利用在 Pod 上声明的 nodeName 或 nodeSelector &#xff0c;以此将 Pod 调度到期望的 Nod…

Alibaba(商品详情)API接口

为了进行电商平台 的API开发&#xff0c;首先我们需要做下面几件事情。 1&#xff09;开发者注册一个账号 2&#xff09;然后为每个alibaba应用注册一个应用程序键&#xff08;App Key) 。 3&#xff09;下载alibaba API的SDK并掌握基本的API基础知识和调用 4&#xff09;利…

计算机专业毕业设计项目推荐03-Wiki系统设计与实现(JavaSpring+Vue+Mysql)

Wiki系统设计与实现&#xff08;JavaSpringVueMysql&#xff09; **介绍****系统总体开发情况-功能模块****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设…

大数据技术之Hadoop:提交MapReduce任务到YARN执行(八)

目录 一、前言 二、示例程序 2.1 提交wordcount示例程序 2.2 提交求圆周率示例程序 三、写在最后 一、前言 我们前面提到了MapReduce&#xff0c;也说了现在几乎没有人再写MapReduce代码了&#xff0c;因为它已经过时了。然而不写代码不意味着它没用&#xff0c;当下很火…

Spring中的JdbcTemplate的使用

在最近的一个工作中&#xff0c;为了简单方便我就是用了Spring自带的JdbcTemplate来访问数据库&#xff0c;我以为之前自己很熟练的掌握&#xff0c;后来才发现我太天真了&#xff0c;踩了很多坑。 基本方法 JdbcTemplate自带很多方法可以执行SQL语句,以下我主要列举&#xf…