reactjs - 嵌套的 Suspense 组件会导致顺序加载还是并行加载？

Question

据我所知，Suspense 组件是 code splitting 的 React-ian 方法。 ，这使得网页加载速度更快。现在，假设您有一个如下所示的组件层次结构:

<App>
  <Suspense fallback={<FirstLoader/>}>
    <OuterWrapper>
      <Suspense fallback={<SecondLoader/>}>
        <InnerWrapper>
          {content}
        </InnerWrapper>
      </Suspense>
    </OuterWrapper>
  </Suspense>
</App>

首先假设只有 InnerWrapper 是延迟加载的，在第二种情况下它们都是延迟加载的。

React 是否会在加载 OuterWrapper 后推迟 InnerWrapper 的加载，还是同时加载？具体来说，在加载第一个组件后是否推迟第二个 Suspense 后备的渲染。

Answer 1

Does React defer the loading of InnerWrapper after OuterWrapper is loaded, or are they both loaded simultaneously? Specifically, whether the rendering of the 2nd Suspense's fallback is deferred after the first component is loaded.

第二个 Suspense 的渲染将延迟到 OuterWrapper。作为子项传递给 OuterWrapper 的所有内容:

     <Suspense fallback={<SecondLoader/>}>
        <InnerWrapper>
          {content}
        </InnerWrapper>
      </Suspense>

在渲染时作为 props.children 传递给 OuterWrapper。因此，第二个 Suspense 的渲染只能在 OuterWrapper 被获取并执行时发生。

此外，在 InnerWrapper 延迟加载的情况下，它将在 OuterWrapper 渲染后获取。因此，在这种情况下，两个组件不是并行获取的，而是一个接一个地获取的。

我创建了一个示例来展示它:https://glitch.com/edit/#!/dusty-ghoul

您可以通过修改此处的delay参数来设置延迟，之后脚本将发送到客户端:

// public/index.js
const OuterWrapper = React.lazy(() => import("./OuterWrapper.js?delay=5000"));
const InnerWrapper = React.lazy(() => import("./InnerWrapper.js?delay=1000"));