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

Question

这是我的当前情况，我的主页由多个带有HTTP请求的组件组成。如果只有当所有组件完成其HTTP请求时才能显示页面，是否可能实现？

谢谢！

附注：我还没有代码可以展示，因为我只处于规划阶段，正在考虑如何开发Web应用程序。

- Sydney Loteria

---

我通常使用一个div作为整个视口的加载屏幕。它具有绝对定位，并且比页面上的其他元素具有更高的z-index值。当http调用完成时，您可以使用最终回调隐藏该div。 - James Cootware

但我的问题是如何检测是否所有（多个）HTTP调用都已完成。如果页面只有一个HTTP调用，我可以做到这一点，但在我的情况下，由于我的主页被分解成多个组件，并且每个组件都有HTTP调用，我想不出如何完成它的方法。 - Sydney Loteria

你可以使用观察者模式。基本上，你有一个对象在每次http响应完成时被通知。一旦它被通知足够多的次数（基于列表或简单计数），它就可以显示页面。 - James Cootware

一些新的框架，如Angular 2或Aurelia，已经内置了该模式，可以直接使用。 - James Cootware

我想挑战你考虑一下这是否是一个好主意。我认为更好的用户体验是立即加载页面并显示一些加载指示器（旋转图标等）或虚拟内容（类似现代Facebook帖子）。 - azium

@azium 是的，我想使用带有加载器的虚拟内容可能是最好的选择。谢谢！ - Sydney Loteria

Answer 1

由于您的应用程序尚未编码完成，因此可以采用更好的组件结构。以下是我看到或实施过的方法。

1. 首先不需要全局加载器 -

如果每个组件在加载数据之前都可以处理渲染，就像使用下面展示的应用程序外壳架构一样。 Facebook帖子的加载外壳将如下所示：
[![enter image description here][1]][1] [1]: https://istack.dev59.com/hBbTY.gif 代码

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

2. 全局加载器

代码

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

Loader组件是一个绝对定位的加载图标/内容。

只有在数据加载完成后，RootComponent才会被挂载，以确保所有属性都具备所需的数据。

许多项目由于组件没有对应的外壳而无法使用前一种方法。但是，由于您没有时间上的限制，第一种方法提供了最佳的用户体验。

- Sagi_Avinash_Varma

---

我想我应该选择第一项。谢谢你的回答！ - Sydney Loteria

如何检查 this.props.isLoading 条件？@Sagi_Avinash_Varma - Aboobakkar P S

对于第二个选项，我甚至会选择“this.props.isLoaded”，但是谢谢，你让我走上了正确的道路。 - Greg Holst