标签导航：

react渲染大量数据导致页面卡顿闪烁怎么办？

React大数据渲染优化：RequestIdleCallback API高效解决页面卡顿和闪烁

React应用渲染大量数据时，常出现页面卡顿或闪烁。本文介绍如何利用requestIdleCallback API优化渲染效率，尤其适用于数据项高度不固定、难以使用虚拟列表优化的场景。

问题根源在于一次性渲染所有数据超出了浏览器处理能力，导致渲染阻塞。解决方案是将数据分批处理，利用浏览器空闲时间逐步渲染。

以下是一个自定义Hook usePerformTask，它巧妙地运用requestIdleCallback：

const usePerformTask = <T>(data: T[], run: (batch: T[]) => void, batchSize = 10) => {
  const dataRef = useRef(data);
  useEffect(() => {
    dataRef.current = data;
  }, [data]);

  useEffect(() => {
    let isCancelled = false;
    const performTask = (deadline: IdleDeadline) => {
      while (!isCancelled && dataRef.current.length > 0 && deadline.timeRemaining() > 0) {
        const batch = dataRef.current.splice(0, batchSize);
        run(batch);
      }

      if (!isCancelled && dataRef.current.length > 0) {
        requestIdleCallback(performTask);
      }
    };
    requestIdleCallback(performTask);

    return () => {
      isCancelled = true;
    };
  }, [batchSize]);
};

此Hook接收三个参数：data（待渲染数据数组）、run（处理数据批次的函数）、batchSize（每次处理的数据量）。它使用useRef跟踪数据，useEffect控制渲染过程。

核心逻辑在performTask函数中：它在浏览器空闲时，每次处理batchSize数量的数据，并用deadline.timeRemaining()判断剩余时间，避免阻塞主线程。 数据未处理完则递归调用requestIdleCallback，直至所有数据渲染完毕。isCancelled变量用于处理组件卸载，防止不必要的计算。

通过这种分批处理，有效避免页面闪烁，提升用户体验。