antd组件onChange回调,需要立即执行改变value与防抖节省接口开销。

本文主要是介绍antd组件onChange回调,需要立即执行改变value与防抖节省接口开销。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 普通使用
    • 使用防抖节省开销
    • 页面功能复杂需要value受控
    • 回调需要部分代码立即执行,部分代码防抖延时执行
      • useRef
      • useCallback
    • 小结

普通使用

当我们使用Antd的input或者select进行搜索时,onChange回调会即时执行。

import { Input } from "antd";
export default function HomePage() {return (<div><InputonChange={(v) => {console.log("value", v.target.value);}}/></div>);
}

当输入123时,控制台打印了三次

在这里插入图片描述

使用防抖节省开销

当我们需要与后台配合使用时,如后台搜索。为了减少接口的调用次数,我们常常使用防抖函数来进行优化。

import { Input } from "antd";
import { debounce } from "lodash-es";
export default function HomePage() {return (<div><InputonChange={debounce((v) => {console.log("value", v.target.value);}, 500)}/></div>);
}

当每次的输入间隔小于500ms时,输入123,控制台只打印了一次

在这里插入图片描述

页面功能复杂需要value受控

当我们的页面比较复杂时,除自己外,其他的组件或页面也可以操控input的内容显示。这时我们就需要给input一个value来手动控制input的内容。

import { ChangeEvent, useState } from "react";
import { Input } from "antd";
export default function HomePage() {const [value, setValue] = useState("123");const handleOnchange = (v: ChangeEvent<HTMLInputElement>) => {console.log("value", v.target.value);setValue(v.target.value);};return (<div><Input value={value} onChange={handleOnchange} /></div>);
}

初始值123,输入666,和第一次一样打印了三次

在这里插入图片描述

增加防抖函数

import { ChangeEvent, useState } from "react";
import { Input } from "antd";
import { debounce } from "lodash-es";
export default function HomePage() {const [value, setValue] = useState("123");const handleOnchange = debounce((v: ChangeEvent<HTMLInputElement>) => {console.log("value", v.target.value);setValue(v.target.value);}, 500);return (<div><Input value={value} onChange={handleOnchange} /></div>);
}

在这里插入图片描述
这里虽然打印了一次,但是value值始终没有改变。

我防抖了value的改变,因此value值没有即时改变,那么onChange的value也不是即时的,所以我的value始终无法改变。

回调需要部分代码立即执行,部分代码防抖延时执行

为了解决上一个问题,我们需要立即执行value的改变,但是接口请求还是需要防抖延时执行。

import { ChangeEvent, useState } from "react";
import { Input } from "antd";
import { debounce } from "lodash-es";
export default function HomePage() {const [value, setValue] = useState("");const handleDebounceSearch = debounce((v: string) => {console.log("vv", v);}, 500);const handleOnchange = (v: ChangeEvent<HTMLInputElement>) => {setValue(v.target.value); // 立即执行handleDebounceSearch(v.target.value); // 防抖延时};return (<div><Input value={value} onChange={handleOnchange} /></div>);
}

在这里插入图片描述
value可以正常显示了,打印的内容也有明显的延迟,但是还是打印了多次,这是为什么?

状态的改变会刷新组件,这个函数式组件重新渲染,handleDebounceSearch方法重新定义,因此每次onChange执行的handleDebounceSearch方法都不是同一个(引用地址不同)。

将handleDebounceSearch函数的引用地址固定住就可以。

可以使用useRef或者useCallback

useRef

import { ChangeEvent, useEffect, useRef, useState } from "react";
import { Input } from "antd";
import { debounce } from "lodash-es";
export default function HomePage() {const [value, setValue] = useState("");const handleDebounceSearch = useRef(debounce(async (value: string) => {console.log("vv", value);}, 500)).current;useEffect(() => {return () => {handleDebounceSearch.cancel();};}, []);const handleOnchange = (v: ChangeEvent<HTMLInputElement>) => {setValue(v.target.value); // 立即执行handleDebounceSearch(v.target.value); // 防抖延时};return (<div><Input value={value} onChange={handleOnchange} /></div>);
}

useCallback

import { ChangeEvent, useCallback, useEffect, useState } from "react";
import { Input } from "antd";
import { debounce } from "lodash-es";
export default function HomePage() {const [value, setValue] = useState("");const handleDebounceSearch = useCallback(debounce((v: string) => {console.log("vv", v);}, 500),[]);useEffect(() => {return () => {handleDebounceSearch.cancel();};}, []);const handleOnchange = (v: ChangeEvent<HTMLInputElement>) => {setValue(v.target.value); // 立即执行handleDebounceSearch(v.target.value); // 防抖延时};return (<div><Input value={value} onChange={handleOnchange} /></div>);
}

在这里插入图片描述

注意组件卸载时清除定时器handleDebounceSearch.cancel()

小结

  • 回调函数频繁调用,并且有较大的请求开销
  • 可以使用防抖的方法解决次数频繁调用
  • 回调的即时处理与防抖处理可分开处理
  • 要注意防抖函数的定义,引用地址是否相同。

这篇关于antd组件onChange回调,需要立即执行改变value与防抖节省接口开销。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/266421

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中,我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试,如何有效地规划和启动测试,如何评估测试是否成功,您应该关注哪些指标,多年来我们发现的常见错误等等。 什么是A/B测试? A/B测试(有时称为“分割测试”)是一种实验类型,其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体,以查看哪一种效果最好。 本质上,A/B测

maven 编译构建可以执行的jar包

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」👈,「stormsha的知识库」👈持续学习,不断总结,共同进步,为了踏实,做好当下事儿~ 专栏导航 Python系列: Python面试题合集,剑指大厂Git系列: Git操作技巧GO

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果: 解密后的数据就是正常数据: 后端:使用的是spring-cloud框架,在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型,如 String, Number, Boolean,

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理,在有一定基础认识的前提下,通过阅读kubelet源码,对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除

jenkins 插件执行shell命令时,提示“Command not found”处理方法

首先提示找不到“Command not found,可能我们第一反应是查看目标机器是否已支持该命令,不过如果相信能找到这里来的朋友估计遇到的跟我一样,其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行,经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】: 需要在jenkins调用shell脚

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】:浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器