React Native setInterval执行异步函数致UI按钮无响应性能问题

为什么按钮无响应但ScrollView可以正常滚动 #

React Native 采用双线程分层架构：

• 普通按钮、可点击组件的事件响应、业务逻辑执行、UI更新指令生成全部跑在JS线程，一旦JS线程被阻塞，原生端采集到的触摸事件无法传到JS侧执行业务回调，就会出现按钮点不动的情况。
• ScrollView 的滚动手势识别、滚动动画默认是在原生UI线程独立执行的，不需要和JS线程实时通信，所以哪怕JS线程完全卡死，ScrollView 依然可以正常滚动。

为什么你的代码会堵死JS线程 #

你对async函数的作用存在常见误区：async只是异步写法的语法糖，不会把代码自动切到其他线程执行，函数内部的同步代码依然会在JS线程同步运行，直接占满线程资源：

• 你写的testIntervalAsync里是连续5000次同步循环，每次循环都调用console.log，而RN安卓端的console.log需要通过JS桥把日志数据从JS线程传到原生端输出，单次开销不低，5000次连续调用直接把JS线程和JS桥占满。
• 你在setInterval回调里没有等待testIntervalAsync执行完成就直接返回，老安卓机JS性能差，上次循环的任务还没跑完，下一次1s间隔的定时器又触发了新任务，任务不断堆积，JS线程完全没有空闲处理触摸事件。

• 不要在JS主线程跑长耗时同步任务，把大任务拆分成小批次执行，每执行完一批就主动让出线程，给触摸事件、UI更新留执行空间。
• 不要用setInterval调度可能长耗时的异步任务，改成递归setTimeout，等上一次任务完全执行完再等间隔触发下一次，避免任务堆积。
• 非调试场景不要在循环里打高频日志，console.log的跨桥通信开销远高于你的预期。
• 如果是CPU密集型计算逻辑，建议放到独立JS工作线程执行，不要占用主JS线程。

修正后的参考代码：

const TestScreen = ({}: TestScreenProps) => {
  useEffect(() => {
    let timerId = null;

    const testIntervalAsync = async () => {
      // 拆分批次，每批处理100条，避免长时间占满线程
      const batchCount = 100;
      for(let i = 0; i < 5000; i += batchCount) {
        // 执行当前批次的业务逻辑
        for(let j = i; j < Math.min(i + batchCount, 5000); j++) {
          // 正式环境请移除循环内的高频日志
          // console.log("Test interval: ", j);
        }
        // 主动让出线程，等事件队列里的触摸、UI任务处理完再继续
        await new Promise(resolve => setTimeout(resolve, 0));
      }
    };

    // 递归调度任务，避免任务堆积
    const scheduleTask = async () => {
      await testIntervalAsync();
      timerId = setTimeout(scheduleTask, 1000);
    };
    scheduleTask();

    return () => {
      clearTimeout(timerId);
    };
  }, []);

  return (
    <Box>
      <ScrollView>
      </ScrollView>
    </Box>
  );
};

如果你的testIntervalAsync里是真实的重计算逻辑，光拆批次可能还是会有感知明显的卡顿，这种情况优先考虑把计算逻辑放到工作线程执行。

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