当前位置：首页 > React

react如何获取执行进度信息

2026-01-25 17:25:49React

获取执行进度的方法

在React中获取执行进度信息通常涉及异步操作（如数据加载、文件上传等）的状态跟踪。以下是几种常见实现方式：

使用自定义状态管理

通过React的useState和useEffect钩子手动跟踪进度：

react如何获取执行进度信息

const [progress, setProgress] = useState(0);

const simulateProgress = () => {
  const interval = setInterval(() => {
    setProgress(prev => {
      if (prev >= 100) {
        clearInterval(interval);
        return 100;
      }
      return prev + 10;
    });
  }, 500);
};

结合Axios上传进度

对于文件上传等场景，可利用Axios的onUploadProgress回调：

axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    setProgress(percentCompleted);
  }
});

使用Web Workers

对于长时间运行的同步任务，通过Web Worker分线程处理并回传进度：

react如何获取执行进度信息

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = (e) => {
  setProgress(e.data.progress);
};

// worker.js
for (let i = 0; i <= 100; i++) {
  postMessage({ progress: i });
  performHeavyTask();
}

第三方库方案

使用现成的进度管理库如react-progress-bar或nprogress：

import NProgress from 'nprogress';

fetchData()
  .then(() => NProgress.done())
  .catch(() => NProgress.done());

进度可视化组件

实现一个基础进度条组件：

function ProgressBar({ value }) {
  return (
    <div style={{ width: '100%', backgroundColor: '#ddd' }}>
      <div 
        style={{ 
          width: `${value}%`, 
          height: '20px', 
          backgroundColor: 'blue' 
        }}
      >
        {value}%
      </div>
    </div>
  );
}