Question

我想在我的React应用程序的render()函数运行时呈现加载屏幕。 This question解决了应用程序初始加载的问题，但是我需要执行对应用程序状态的更新，然后根据新状态重新渲染应用程序，这看起来非常昂贵。但是，我尝试执行的任何操作都会导致应用在运行渲染时完全冻结。是否有一种方法可以在等待DOM重新呈现时呈现动态加载屏幕？

这是一个显示我意图的代码框：https://codesandbox.io/s/elated-lamarr-fhqwe?file=/src/App.js

在该示例中，我希望在渲染其他div时显示“ LOADING” div（理想情况下这是某种动态的“ loader”组件），然后在完成渲染时消失。 / p>

Answer 1

您为此拥有conditional-rendering

...

this.state = {
  isLoading: true
};

...
componentDidMount() {
  expensiveCalculation(...);
  this.setState({ isLoading: false }); // Add additional state updates as per above results
}

...
render() {
  this.state.isLoading ? <Loader /> : <Component {...props} />;
}

如果计算成本很高，则可以使用memoize-one之类的库，该库可以帮助您在输入值不变的情况下跳过密集计算。

在更新后等待DOM渲染时渲染渲染屏幕

1 个答案: