一、简介
防抖和节流主要用于控制事件触发频率，提高页面性能和用户体验。
防抖: 当事件被触发后，在一定时间内有新的对应事件，则会取消老的事件执行。
节流: 当事件触发后，在一定时间内会忽略新的事件执行。
二、技术实现
1、useDebounce hook
export const useDebounce = (state, delay) => {const [debounceState, setDebounceState] = useState({...state});useEffect(() => {const timeout = setTimeout(() => {setDebounceParam({...param,});}, delay);return () => clearTimeout(timeout);}, [state]);}使用样例:
export UserComponent = ()=>{const [userName, setUserName] = useState("");const [user, setUser] = useState({});const debounceUserName = useDebounce(userName, 300);useEffect(() => {User user = getUserByUserName(userName);setUser(...user);}, [debounceUserName]);return (<div>用户名：<input type = 'text' value = {userName} onChange = {setUserName}/>用户信息: <span>{user.info}</span><div/> );
}2.useThrottle hook
export const useThrottle = (state, limit) =>{const [throttleState, setThrottleState] = useState(...state);// 记录下上次触发的时间const [lastTrigger, setLastTrigger] = useState(Date.now());useEffect(() => {const timeout = setTimeOut(() =>{if (Date.now() - lastTrigger < dealy){return;}setThrottleState(throttleState);setLastTrigger(now);});return clearTimeout(timeout);}, [state])
}
)