reactjs - 昂贵的函数阻止 render() 更新

Question

在我的(类)组件中，我想在 _expenseFunction 的持续时间内显示加载微调器。值isLoading在函数执行前的状态发生了变化，但在_expectiveFunction完成之前不会重新渲染(spinner不旋转)。

我尝试使用componentDidUpdate和forceUpdate，但没有成功。

_makeCalculation() {
  this.setState(
    { isLoading: true },
    () => this._expensiveFunction(),
  );
}


_expensiveFunction() {
  console.log(this.state.isLoading); // => true
  // ***
  this.setState({ isLoading: false });
}

Answer 1

一个常见的技巧是依赖 setTimeout():

_makeCalculation() {
  this.setState(
    { isLoading: true },
    () => setTimeout(this._expensiveFunction, 0),
  );
}