找建筑类工作哪个网站好,asp做网站得多长时间,苏州木渎做网站公司,建设一个视频教学网站文章目录 普通使用使用防抖节省开销页面功能复杂需要value受控回调需要部分代码立即执行#xff0c;部分代码防抖延时执行useRefuseCallback 小结 普通使用
当我们使用Antd的input或者select进行搜索时#xff0c;onChange回调会即时执行。
import { Input } from an… 文章目录 普通使用使用防抖节省开销页面功能复杂需要value受控回调需要部分代码立即执行部分代码防抖延时执行useRefuseCallback 小结 普通使用
当我们使用Antd的input或者select进行搜索时onChange回调会即时执行。
import { Input } from antd;
export default function HomePage() {return (divInputonChange{(v) {console.log(value, v.target.value);}}//div);
}当输入123时控制台打印了三次 使用防抖节省开销
当我们需要与后台配合使用时如后台搜索。为了减少接口的调用次数我们常常使用防抖函数来进行优化。
import { Input } from antd;
import { debounce } from lodash-es;
export default function HomePage() {return (divInputonChange{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: ChangeEventHTMLInputElement) {console.log(value, v.target.value);setValue(v.target.value);};return (divInput 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: ChangeEventHTMLInputElement) {console.log(value, v.target.value);setValue(v.target.value);}, 500);return (divInput 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: ChangeEventHTMLInputElement) {setValue(v.target.value); // 立即执行handleDebounceSearch(v.target.value); // 防抖延时};return (divInput 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: ChangeEventHTMLInputElement) {setValue(v.target.value); // 立即执行handleDebounceSearch(v.target.value); // 防抖延时};return (divInput 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: ChangeEventHTMLInputElement) {setValue(v.target.value); // 立即执行handleDebounceSearch(v.target.value); // 防抖延时};return (divInput value{value} onChange{handleOnchange} //div);
}注意组件卸载时清除定时器handleDebounceSearch.cancel() 小结
回调函数频繁调用并且有较大的请求开销可以使用防抖的方法解决次数频繁调用回调的即时处理与防抖处理可分开处理要注意防抖函数的定义引用地址是否相同。
