反应等待异步或重新渲染？

Question

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

在这种情况下，我可以想到 2 个选项。

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

选项 1 在没有数据的情况下加载速度稍快，然后重新呈现数据（总共 2 个），选项 2 只会呈现一次但组件显示速度较慢。

哪种方法更好？

Answer 1

这取决于design/demand你有什么。

一种正常的方法是为请求添加 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 />}
    ...

反应等待异步或重新渲染？

React await async or rerender?

asynchronous

render

async-await

reactjs

redux