React 自定义hook 之 防抖和节流

一、简介

        防抖和节流主要用于控制事件触发频率，提高页面性能和用户体验。

        防抖: 当事件被触发后，在一定时间内有新的对应事件，则会取消老的事件执行。

        节流: 当事件触发后，在一定时间内会忽略新的事件执行。

二、技术实现

1、useDebounce hook

export const useDebounce = (state, delay) => {
    const [debounceState, setDebounceState] = useState(null);
    
    useEffect(() => {
        const timeout =  setTimeout(() => {
            setDebounceParam({
                ...state,
            });
        }, delay);
        return () => clearTimeout(timeout);
    }, [state]);
    

    return debounceState;
}

使用样例:

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(null);
    // 记录下上次触发的时间
    const [lastTrigger, setLastTrigger] = useState(Date.now());
    
    useEffect(() => { 
        if (Date.now() - lastTrigger < dealy){
                return;
        }
        setThrottleState(state);
        setLastTrigger(Date.now());
    }, [state])

    return throttleState;
}