在现代Web应用开发中，性能优化是一个重要的话题。特别是当我们处理用户输入，例如搜索框和表单时，我们希望减少不必要的处理，例如频繁的API调用。这时，"防抖"技术就显得尤为重要。
防抖原理
防抖，简单来说，就是可以确保一个函数在一定的时间间隔内只执行一次，即使它被多次触发。在用户输入的场景中，这意味着只有在用户停止输入一段时间后，才会执行相关的函数，如API调用。
在防抖原理的背后，通常是通过设置一个定时器来实现的。当防抖函数被连续调用时，之前的定时器会被清除，并且重新设置一个新的定时器。如果在定时器到期之前函数再次被调用，定时器会再次被重置。只有当连续调用间隔超过指定的时间时，定时器才会到期，函数才会被执行。
React中实现防抖
用一段代码展示在react中如何实现一个带防抖功能的输入框：
import { useState, useCallback } from 'react';
import { debounce } from 'lodash';
import styled from 'styled-components';
const Input = styled.input`
padding: 10px;
border: 1px solid #ccc;
`;
interface Props {
onChange: (value: string) => void;
}
export function DebouncedInput({ onChange }: Props) {
const [value, setValue] = useState('');
// 防抖处理onChange事件处理器
const handleChange = useCallback(
// 在这里触发 api
debounce((e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value);
}, 1000),
[]
);
return (
<Input
value={value}
onChange={e => {
setValue(e.target.value);
handleChange(e);
}}
/>
);
}
代码解释
这里面的 useCallback hook结合lodash库中的debounce函数创建了一个防抖函数。这个函数在被连续调用时，会延迟1秒（1000毫秒）执行。如果在这1秒内函数再次被触发，它将重新开始计时。