如何控制并发数量react
控制并发数量的方法
在React中控制并发数量通常涉及限制同时执行的异步操作数量，例如API请求或任务处理。以下是几种常见方法：
使用自定义Hook实现并发控制
创建一个自定义Hook来管理并发任务队列：
import { useState, useEffect } from 'react';
function useConcurrency(maxConcurrent) {
const [queue, setQueue] = useState([]);
const [activeTasks, setActiveTasks] = useState(0);
const enqueue = async (task) => {
return new Promise((resolve, reject) => {
setQueue(q => [...q, { task, resolve, reject }]);
});
};
useEffect(() => {
if (activeTasks < maxConcurrent && queue.length > 0) {
setActiveTasks(a => a + 1);
const { task, resolve, reject } = queue[0];
setQueue(q => q.slice(1));
task()
.then(resolve)
.catch(reject)
.finally(() => setActiveTasks(a => a - 1));
}
}, [queue, activeTasks, maxConcurrent]);
return { enqueue, activeTasks, queueLength: queue.length };
}使用第三方库
p-limit是一个专门用于限制并发的小型库：
import pLimit from 'p-limit';
const limit = pLimit(3); // 最多3个并发
async function fetchData(url) {
return limit(() => fetch(url).then(res => res.json()));
}
// 在组件中使用
function MyComponent() {
const handleClick = async () => {
const results = await Promise.all(
urls.map(url => fetchData(url))
);
// 处理结果
};
}使用Promise池
实现一个简单的Promise池来控制并发：
class PromisePool {
constructor(maxConcurrent) {
this.maxConcurrent = maxConcurrent;
this.current = 0;
this.queue = [];
}
async add(task) {
if (this.current >= this.maxConcurrent) {
await new Promise(resolve => this.queue.push(resolve));
}
this.current++;
try {
return await task();
} finally {
this.current--;
if (this.queue.length) {
this.queue.shift()();
}
}
}
}结合React状态管理
在组件状态中跟踪正在进行的任务：
function ConcurrentComponent() {
const [tasks, setTasks] = useState([]);
const MAX_CONCURRENT = 3;
const addTask = async (taskFn) => {
if (tasks.length >= MAX_CONCURRENT) {
await new Promise(resolve => {
const check = () => {
if (tasks.length < MAX_CONCURRENT) {
resolve();
return;
}
setTimeout(check, 100);
};
check();
});
}
const taskId = Date.now();
setTasks(t => [...t, taskId]);
try {
return await taskFn();
} finally {
setTasks(t => t.filter(id => id !== taskId));
}
};
}注意事项
- 确保在组件卸载时取消未完成的请求
- 考虑添加超时处理机制
- 对于大量任务，可能需要分批处理
- 在服务端渲染场景下需要特别处理并发控制
这些方法可以根据具体需求进行组合和调整，以适应不同的并发控制场景。
