反应等待异步还是重新渲染？

Question

我有一个呈现从服务器接收的数据的组件。

在这种情况下，我可以考虑使用两个选项。

componentDidMount()中的
1. 触发获取函数，并使用初始（空）数据进行渲染，并在设置状态后让redux重新渲染
2. await中的componentDidMount()，并等待服务器响应，然后使用接收到的数据进行渲染

在没有数据的情况下，Option1的加载速度会稍快一些，然后重新呈现数据（共2个），而Option2只会呈现一次，但是组件显示的速度会更慢。

哪种方法更好？

Answer 1

这取决于您的设计/需求。

一种正常的方法是为请求添加loading动画（如material-ui loading）。并且仅在达到响应时渲染。

async componentDidMount() {
  await this.request();
}
async request() {
  const req: ReqParamsType = {
    ...
  }
  this.setState({loading: true});
  await this.props.getReports(req);
  this.setState({loading: false});
}

render() {
  const { loading } = this.state;
  return (
    {loading ? <LoadingAnimation /> : <MainContent />}
    ...