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

这是我当前的场景，我的主页由多个组件和一个HTTP请求组成。如果我的所有组件都完成了HTTP请求，是否可以显示页面

谢谢

---

另外，我还没有代码要显示，因为我正在计划如何开发web应用。

由于您的应用尚未编码，您可以采用更好的组件结构。 这些都是我看到或实施的方法

一,。首先不需要全局加载程序-

如果您的每个组件都可以在加载数据之前处理渲染，比如使用如下所示的应用程序外壳架构。 facebook帖子的加载外壳看起来像 [！[在此处输入图像描述][1][1] [1]: https://i.stack.imgur.com/hBbTY.gif 代码

二,。全局加载器

代码

其中Loader组件是绝对定位的加载图标/内容。 RootComponent仅在加载数据时安装，以便所有道具都具有所需的数据

---

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

我通常有一个div，它占据整个视口作为加载屏幕。它具有绝对定位，并且比页面的其余部分具有更高的z索引。当http调用完成时，可以用最后一个callback隐藏div，但我的问题是如何检测是否所有多个http调用都已完成。如果页面只有一个http调用，我可以这样做，但在我的情况下，因为我的主页被分解为多个组件，每个组件中都有http调用。我想不出怎么做，你可以用。基本上，每次http响应完成时都会有一个对象收到通知。一旦它已经根据一个列表或简单的计数被通知了足够的时间，它就可以显示PigSeMe，像角2或奥雷利亚这样的新框架已经建立好了。我将挑战你来考虑这是否是个好主意。我认为更好的用户体验是使用一些加载指示器微调器或虚拟内容立即加载页面。我认为现代facebook帖子我认为我应该选择第一位。谢谢你的回答！如何检查此.props.isLoading条件@Sagi_Avinash_VarmaforOption 2，我甚至会选择“this.props.isLoaded”，但谢谢你，你让我走上了正确的道路。

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

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