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

相关文章

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错误报错

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

讯飞webapi语音识别接口调用示例代码(python)

《讯飞webapi语音识别接口调用示例代码(python)》:本文主要介绍如何使用Python3调用讯飞WebAPI语音识别接口,重点解决了在处理语音识别结果时判断是否为最后一帧的问题,通过运行代... 目录前言一、环境二、引入库三、代码实例四、运行结果五、总结前言基于python3 讯飞webAPI语音

MyBatis-Plus中Service接口的lambdaUpdate用法及实例分析

《MyBatis-Plus中Service接口的lambdaUpdate用法及实例分析》本文将详细讲解MyBatis-Plus中的lambdaUpdate用法,并提供丰富的案例来帮助读者更好地理解和应... 目录深入探索MyBATis-Plus中Service接口的lambdaUpdate用法及示例案例背景