面试题：React中防抖与节流的基本实现

防抖（Debounce）

作用：在按钮点击场景下，防抖的作用是当用户频繁点击按钮时，不会立即触发相应操作，而是在用户停止点击后的一段指定时间后才触发。例如在搜索框输入时，用户可能快速输入多个字符，使用防抖可以避免在每次输入都发起搜索请求，而是等用户输入完成不再操作后再发起请求，减少不必要的请求次数。
实现：

import React, { useState, useEffect } from 'react';

const DebounceButton = () => {
    const [count, setCount] = useState(0);
    let timer = null;

    const handleClick = () => {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            setCount(count + 1);
        }, 500); // 500毫秒后触发
    };

    return (
        <div>
            <button onClick={handleClick}>防抖按钮</button>
            <p>点击次数: {count}</p>
        </div>
    );
};

export default DebounceButton;

使用 useEffect 优化：

import React, { useState, useEffect } from 'react';

const DebounceButton = () => {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1);
    };

    useEffect(() => {
        const timer = setTimeout(() => {
            // 这里可以进行防抖后的实际操作，例如调用API
        }, 500);

        return () => clearTimeout(timer);
    }, [count]);

    return (
        <div>
            <button onClick={handleClick}>防抖按钮</button>
            <p>点击次数: {count}</p>
        </div>
    );
};

export default DebounceButton;

节流（Throttle）

作用：在按钮点击场景下，节流的作用是限制按钮点击的频率，确保在指定的时间间隔内，无论用户点击多少次，都只会触发一次操作。比如在一个投票按钮上，使用节流可以避免用户短时间内重复投票，保证在一定时间内只能投一次票。
实现：

import React, { useState } from 'react';

const ThrottleButton = () => {
    const [count, setCount] = useState(0);
    let canClick = true;

    const handleClick = () => {
        if (canClick) {
            setCount(count + 1);
            canClick = false;
            setTimeout(() => {
                canClick = true;
            }, 1000); // 1秒内只能点击一次
        }
    };

    return (
        <div>
            <button onClick={handleClick}>节流按钮</button>
            <p>点击次数: {count}</p>
        </div>
    );
};

export default ThrottleButton;

使用 useRef 优化：

import React, { useState, useRef } from 'react';

const ThrottleButton = () => {
    const [count, setCount] = useState(0);
    const throttleRef = useRef(true);

    const handleClick = () => {
        if (throttleRef.current) {
            setCount(count + 1);
            throttleRef.current = false;
            setTimeout(() => {
                throttleRef.current = true;
            }, 1000);
        }
    };

    return (
        <div>
            <button onClick={handleClick}>节流按钮</button>
            <p>点击次数: {count}</p>
        </div>
    );
};

export default ThrottleButton;

防抖和节流的区别

触发时机：
- 防抖：在事件触发后，等待指定时间，如果这段时间内事件再次触发，则重新计时，直到指定时间内没有再次触发事件，才执行操作。
- 节流：在事件触发时，判断是否在冷却时间内，如果不在冷却时间内则执行操作，并开始冷却计时，在冷却时间内再次触发事件不会执行操作。
应用场景：
- 防抖：适用于需要等待用户操作结束后执行的场景，如搜索框输入、窗口resize等。
- 节流：适用于需要限制操作频率的场景，如按钮点击、滚动事件等。

面试题：React中防抖与节流的基本实现

知识考点

面试题答案

防抖（Debounce）

节流（Throttle）

防抖和节流的区别