React中runOnce节流函数更新state后失效问题求助

问题根源 #

当调用setCount更新state时，组件会触发重渲染。每次重渲染时，组件内部所有代码都会重新执行——包括重新定义runOnce函数、重新创建handleButtonClick。这导致每次重渲染后，runOnce里的timer变量都会被重置为null，所以每次点击按钮都会通过if (!timer)的判断，节流逻辑直接失效。

修复方案 #

要解决这个问题，需要把节流用的timer状态持久化，让它不随组件重渲染被重置。React的useRef正好能满足这个需求：它的.current属性在组件整个生命周期内都保持不变，不会因为重渲染而重置。

方案一：直接在组件内用useRef维护timer #

修改后的代码如下：

const HomeScreen = ({ navigation }) => {
    const [count, setCount] = useState(1);
    // 用useRef保存timer，避免重渲染时重置
    const timerRef = useRef(null);

    const handleButtonClick = () => {
        if (!timerRef.current) {
            console.log("This function will run only once in 3000 milliseconds");
            setCount(prev => prev + 1);
            
            timerRef.current = setTimeout(() => {
                // 延迟结束后重置timer，允许下次执行
                timerRef.current = null;
            }, 3000);
        }
    };

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{ margin: 10, color: 'red', fontSize: 24 }}>{count}</Text>
                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleButtonClick}>
                    <Text style={{ color: 'blue' }}>Increment Count</Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

方案二：封装成自定义Hook（复用性更强） #

如果需要在多个组件里使用这个节流逻辑，可以封装成自定义Hook：

// 自定义节流Hook
function useRunOnce(func, delay) {
    const timerRef = useRef(null);

    // 用useCallback缓存函数，避免每次重渲染创建新函数
    return useCallback(() => {
        if (!timerRef.current) {
            timerRef.current = setTimeout(() => {
                timerRef.current = null;
            }, delay);
            func();
        }
    }, [func, delay]);
}

const HomeScreen = ({ navigation }) => {
    const [count, setCount] = useState(1);

    const handleButtonClick = useRunOnce(() => {
        console.log("This function will run only once in 3000 milliseconds");
        setCount(prev => prev + 1);
    }, 3000);

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{ margin: 10, color: 'red', fontSize: 24 }}>{count}</Text>
                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleButtonClick}>
                    <Text style={{ color: 'blue' }}>Increment Count</Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

两种方案核心都是用useRef持久化timer的状态，确保组件重渲染时不会丢失节流的状态，这样即使更新state触发重渲染，节流逻辑依然能正常工作，3000毫秒内只会执行一次函数。

内容的提问来源于stack exchange，提问作者Ragnar