setInterval会阻塞用户输入吗？React Native秒表按钮响应延迟问题

• 核心卡顿原因是10ms间隔的高频状态更新完全阻塞JS线程：你设置的setInterval每10ms就触发一次setTime更新，每次state变更都会导致整个函数组件重新执行、重渲染所有子元素（包括所有按钮、列表组件），相当于每秒强制组件重渲染100次，远高于React Native JS线程的合理负载。此时按钮点击产生的事件、状态更新回调都会在任务队列中排队等待，等JS线程空闲时才能被处理，自然会出现1秒以上的响应延迟。
  移动设备UI常规刷新频率为60fps（约每16.6ms刷新1帧），设置10ms的更新间隔本身就不符合UI渲染规律，不仅不会让秒表更流畅，反而会造成无意义的性能浪费。
• 次要逻辑bug：计次（Lap）按钮存在闭包陷阱，在setLaps中读取的lapCounter是渲染闭包中的旧值，会导致第一次点击Lap时记录的计次序号为0，和预期逻辑不符。
• 潜在精度问题：累加式的计时逻辑存在累计误差，一旦JS线程被阻塞导致setInterval回调延迟触发，最终显示的时间会比实际时间慢。

1. 替换累加计时逻辑为时间戳差值计算：用ref存储秒表启动的时间基准，每次定时器触发时直接计算当前时间和启动基准的差值，从根源避免累计误差，同时兼容暂停后继续计时的场景。
2. 调整定时器更新频率：将间隔从10ms改为30ms（每秒30次更新），既可以保证10ms单位的时间显示精度，又不会给JS线程造成过重负担，完全不影响人眼观感，线程空闲后可即时响应按钮操作。
3. 修复Lap按钮的闭包问题，更新计次数据时直接使用计算后的最新序号，避免异步state更新导致的取值错误。
4. 用ref存储定时器实例，避免effect重跑时出现定时器引用丢失、无法正确清理的问题。

修复后的核心代码如下（记得从react导入useRef）：

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
import { RootTabScreenProps } from '../types';

export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {

    const [time, setTime] = useState<number>(0);
    const [timerOn, setTimerOn] = useState(false);
    const [lapCounter, setLapCounter] = useState<number>(0);
    const [laps, setLaps] = useState<{count: number, lapTime: number}[]>([])
    // 存储非渲染相关的可变值，不会触发重渲染
    const startTimeRef = useRef<number>(0);
    const intervalRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {
        if (timerOn) {
            // 计算启动时间基准，兼容暂停后继续计时的场景
            startTimeRef.current = Date.now() - time;
            intervalRef.current = setInterval(() => {
                // 直接通过时间差计算准确时长，无累计误差
                setTime(Date.now() - startTimeRef.current);
            // 调整间隔为30ms，大幅降低无效重渲染负载
            }, 30);
        } else {
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        }
        return () => {
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        }
    }, [timerOn]);

  return (
    <View style={styles.container}>
                <Text>time:</Text>
                <View style={styles.timer}>
                    <Text>{("0" + Math.floor(time / 60000) % 60).slice(-2)}:</Text>
                    <Text>{("0" + Math.floor(time / 1000) % 60).slice(-2)}:</Text>
                    <Text>{("0" + Math.floor(time / 10) % 100).slice(-2)}</Text>
                </View>

                <View style={styles.buttons}>
                <Button
                    title="Start"
                    onPress={() => setTimerOn(true)}
                />
                <Button
                    title="Stop"
                    onPress={() => setTimerOn(false)}
                />
                <Button 
                    title="Lap"
                    onPress={() => {
                        // 直接计算最新计次序号，规避闭包旧值问题
                        const newCount = lapCounter + 1;
                        setLapCounter(newCount)
                        setLaps(prevLaps => [
                            ...prevLaps,
                            {count: newCount, lapTime: time}
                        ])
                    }}
                />
                <Button
                    title="Reset"
                    onPress={() => { 
                        setTimerOn(false)
                        setTime(0)
                        setLapCounter(0)
                        setLaps([])
                        }
                    }
                />
            </View>
            <FlatList
            data={laps}
                renderItem={({ item }) => 
                <View style={styles.lapList}>
                    <Text style={styles.item}>Lap: {item.count}</Text>
                    <Text style={styles.item}>{item.lapTime}</Text>
                </View>
                }   
            />

    </View>
  );
}

const styles = StyleSheet.create({
  // 原有样式保持不变即可
  container: {flex: 1, padding: 20},
  timer: {flexDirection: 'row', fontSize: 40, marginVertical: 30},
  buttons: {flexDirection: 'row', justifyContent: 'space-around', marginVertical: 20},
  lapList: {flexDirection: 'row', justifyContent: 'space-between', padding: 10, borderBottomWidth: 1},
  item: {fontSize: 16}
})

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