我如何在显示微调器的 React 组件方法中等待繁重的功能？

Question

我想在 React 组件的方法中进行繁重的同步计算时显示消息“正在计算...”。
这是我的代码。
但它不起作用。我希望 React 在第一个 setState 和第二个 setState 之后调用 render()。
但是 React 仅在第二次 setState 之后才调用它。
如何正确切换 this.state.calculating？

// note: this is not async function
function myHeavyFunc() {...}

class Foo extends React.Components {
  constructor(props) {
    super(props);
    this.state = {calculating: false}
    this.handleXX = this.handleXX.bind(this);
  }

  handleXX() {
    this.setState({calculating: true}, () => { // first setState
       new Promise((resolve, reject) => {
         const x = myHeavyFunc();
         resolve(x);
       }).then(x => {
         this.setState({calculating: false}); // second setState
       });
    });
  }
  
  render() {
    const y = this.state.calculating? <p>calculating...</p> : '';
    return (
      <div>
        {y}
        <button onClick={this.handleXX}>start calc</button>
      </div>
    );
  }
}

Answer 1

完成计算后，您应该将“正在计算”状态变量设置回“假”而不是“真”：

handleXX() {
    this.setState({calculating: true}, () => { // first setState
        new Promise((resolve, reject) => {
            const x = myHeavyFunc();
            resolve(x);
        }).then(x => {
            this.setState({calculating: false}); // second setState
        });
    });
}

Answer 2

这是因为js是单线程的。

只有在这种情况下，您可以使用 setTimeout 给定一个时间来更新 UI 以显示“正在计算...”，然后调用 myHeavyFunc。

更通用的解决方案是使用 React 18 中提供的 startTrantision。

Webworker 也可以解决这个问题。

我如何在显示微调器的 React 组件方法中等待繁重的功能？

How can I wait a heavy function in method of React component with showing spinner?

javascript

asynchronous

reactjs

es6-promise