在显示页面之前完成加载所有组件 - React JS

This is my current scenario, My homepage compose of multiple components with an HTTP request. Is it possible to display the page if only when all of my components finish their HTTP request?

这是我目前的情况,我的主页由多个组件组成,带有HTTP请求。只有在我的所有组件完成HTTP请求时才能显示页面吗?

Thanks!

P.S. I have no codes to show yet since im just in my planning stage on how will I developed the web app.

附:我没有代码可以展示,因为我刚刚在我的规划阶段,我将如何开发网络应用程序。

1 个解决方案

#1

Since your app is not coded yet, you can adopt better component structure. These are approaches that i have seen or implemented.

由于您的应用尚未编码,因此您可以采用更好的组件结构。这些是我见过或实现过的方法。

1. No global Loader needed in the first place -

1.首先不需要全球装载机 -

If each of your components can handle rendering even before data loaded, like use of a App Shell architechture as shown below. a loading shell of a facebook post would look like
Code

如果每个组件都可以在加载数据之前处理渲染,例如使用App Shell架构,如下所示。 facebook帖子的加载shell看起来像Code

    class Post extends React.Component {
      render() {
        return this.props.isLoading ? (
          <div className="post">...</div>
        ) : (
          <div className="post-shell"></div>
        ); 
      }
    }

2. Global loader

2.全球装载机

Code

    class App extends React.Component {
      render() {
        return this.props.isLoading ? (
          <RootComponent {...props}>
        ) : (
          <Loader />
        );
      }
    }

where Loader component is an absolutely positioned loading icon/content. RootComponent is only mounted when data is loaded so that all props are having required data.

其中Loader组件是绝对定位的加载图标/内容。只有在加载数据时才会挂载RootComponent,以便所有道具都具有所需的数据。

many projects don't have the luxury to the the former as the components are not written with corresponding shells. but since you are not constrained by time. The first approach gives the best UX.

许多项目没有前者的奢侈品,因为组件不是用相应的shell编写的。但既然你不受时间的限制。第一种方法提供了最好的用户体验。

#1