昂贵的功能块 render() 更新

Question

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

我尝试了 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),
  );
}

昂贵的功能块 render() 更新

Expensive function blocks render() update

rerender

reactjs