使用 setState 响应计算密集型函数的更新进度

Question

我有一个简单的 React 类，显示 this.state.progress（一个数字），这个状态可以通过 updateProgress(progress) 函数更新。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
    }
  }

  updateProgress = (progress) => {this.setState({progress}); };
  render() {
    let {progress} = this.state;
    return <h1>{progress}</h1>;
  }
}

我有一个计算密集型函数myHeavyFunc，我需要为此显示进度条。我使用myHeavyFunc 中的循环变量调用上面提到的updateProgress 函数。

myHeavyFunc = async (updateProgress) => {
    let loopLength = 1000000;
    updateProgress(0);
    for(let i=0; i<loopLength; i++) {
      // some processing happens here
      updateProgress((i+1)/loopLength);
    }
}

发生的情况是状态得到更新，我可以通过控制台在setState 回调中记录进度来确认这一点，但组件直到最后才会重新渲染。但是，如果我包含一个 1 毫秒的小 sleep，那么会发生重新渲染，进度更新（显然时间上有巨大的损失，我不喜欢）。

JSFiddle here。在这里，我在单击进度号时运行myHeavyFunc。您可以看到，当 await sleep(1) 被评论时，onClick 在一秒钟内完成，但不显示进度。它甚至不会因任何后续点击而改变。另一方面，如果没有评论，我会得到进度更新，但它只需要永远完成！

我知道 React 出于性能原因应该 batch 更新，但就我而言，在整个循环完成之前我什至看不到一次更新。另外，请注意，我不是在寻找 synchronous setState 函数，但在设置状态后我需要重新渲染（至少仅在进度元素上）。如果它由于批处理而丢失了一些进度更新，我很好，但我确实希望它能够显示进度。

有没有办法在更新 UI 中的进度时以非阻塞方式运行 myHeavyFunc？ 在 React 中更新计算密集型函数进度的正确方法是什么？

Answer 1

我建议您尽可能少地通知进度。进度会从 0 到 100，所以我只会通知进度 100 次，并且我会添加一个超时，以便用户可以看到进度转换：

如果循环长度 = 1000000，

1000000 / 100 = 10000

每 10000 次迭代我将调用 updateProgress 函数。

let myHeavyFunc = async (updateProgress) => {
  let loopLength = 1000000;
  let current = 0;
  for(let i=0; i<loopLength; i++) {
    const result = Math.floor(((i+1)/loopLength)*100);
    if(current != result) {
       setTimeout(()=> {
           updateProgress(result);
       }, result *100);
    }
    current = result;
  }
}

见：https://jsfiddle.net/wbzx4j90/1/

Answer 2

我猜问题在于浏览器重绘。通常，浏览器每秒重绘 60 帧。在您的情况下，您要求浏览器执行更多的绘画。我建议使用 requestAnimationFrame 而不是 for 循环来持续更新 DOM。 requestAnimationFrame 将在浏览器执行下一次重绘之前处理要调用的函数。

  let i = 0
  let loopLength = 1000;

  let myHeavyFunc = (updateProgress) => {
    updateProgress((i+1)/loopLength);
    i++;
  if (i < loopLength) {
    window.requestAnimationFrame(() => myHeavyFunc(updateProgress));
    
  }
}

工作演示https://jsfiddle.net/gdq5ouat/5/