React中使用requestIdleCallback优化大量数据渲染？-灵析社区

const usePerformTask = (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]); }; 简单的自定义一个hooks来解决这个问题。 大量数据分片渲染，可以使用`deadline.timeRemaining`这个方法来判断当前帧是否还有时间做任务。