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

相关文章

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Spring定时任务只执行一次的原因分析与解决方案

《Spring定时任务只执行一次的原因分析与解决方案》在使用Spring的@Scheduled定时任务时,你是否遇到过任务只执行一次,后续不再触发的情况?这种情况可能由多种原因导致,如未启用调度、线程... 目录1. 问题背景2. Spring定时任务的基本用法3. 为什么定时任务只执行一次?3.1 未启用

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

如何解决mysql出现Incorrect string value for column ‘表项‘ at row 1错误问题

《如何解决mysql出现Incorrectstringvalueforcolumn‘表项‘atrow1错误问题》:本文主要介绍如何解决mysql出现Incorrectstringv... 目录mysql出现Incorrect string value for column ‘表项‘ at row 1错误报错