React+Ant Design实现加载时进度条百分比递增问题求助

我来帮你梳理下问题所在，以及对应的修复方案：

你的代码存在的核心问题 #

1. 生命周期方法选择错误：你使用了componentDidUpdate，这个方法只有在组件的状态或属性发生更新后才会触发。但页面初始加载完成时，组件第一次渲染后没有任何状态变更，所以这个方法根本不会执行，自然看不到进度条的变化。
2. 同步循环与异步setState的冲突：就算componentDidUpdate能触发，你里面的for循环是同步执行的，而React的setState是异步批量更新机制。这意味着循环里的所有setState会被合并，最终只会把percent设置为循环结束时的39，你看不到逐步递增的动画效果，甚至可能因为反复触发componentDidUpdate导致不必要的渲染循环。

修复后的完整代码 #

我们改用componentDidMount启动进度逻辑，并用定时器实现逐步递增的效果：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { percent: 0 };
    this.progressTimer = null; // 保存定时器引用，方便后续清理
  }

  componentDidMount() {
    // 页面加载完成后，启动进度条递增
    this.startProgress();
  }

  startProgress = () => {
    const { percent } = this.state;
    if (percent < 40) {
      // 每次递增1，状态更新完成后延迟100ms继续（可调整速度）
      this.setState({ percent: percent + 1 }, () => {
        this.progressTimer = setTimeout(this.startProgress, 100);
      });
    } else {
      // 达到目标值后清除定时器
      clearTimeout(this.progressTimer);
    }
  };

  componentWillUnmount() {
    // 组件卸载时清理定时器，避免内存泄漏
    if (this.progressTimer) {
      clearTimeout(this.progressTimer);
    }
  }

  render() {
    return (
      <div>
        <Progress percent={this.state.percent} />
      </div>
    );
  }
}

代码逻辑说明 #

• componentDidMount：页面首次渲染完成后立即触发，在这里启动进度条的递增逻辑，确保初始加载时就能看到动画。
• startProgress方法：通过递归+setTimeout实现逐步递增，每次将percent加1，直到达到目标值40后停止定时器。
• 定时器清理：在componentWillUnmount中清除定时器，防止组件卸载后定时器仍在运行，造成内存泄漏。
• setState回调：利用setState的第二个回调参数，确保状态更新完成后再设置下一次定时器，保证进度条是平滑递增的。

如果你更倾向于用setInterval实现，也可以参考这个写法：

componentDidMount() {
  this.progressTimer = setInterval(() => {
    this.setState(prevState => {
      if (prevState.percent >= 40) {
        clearInterval(this.progressTimer);
        return { percent: 40 };
      }
      return { percent: prevState.percent + 1 };
    });
  }, 100);
}

这样两种方式都能实现你想要的「页面加载时进度条自动递增」的效果啦～

内容的提问来源于stack exchange，提问作者Mark Gerryl Mirandilla