嵌套的 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 的加载，还是同时加载它们？具体来说，2nd Suspense 的 fallback 的渲染是否在第一个组件加载后延迟渲染。

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 的所有内容都是 children:

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

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

此外，在 InnerWrapper 为 lazy-loaded 的情况下，它将在呈现 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"));

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

Do nested Suspense components cause a sequential or a parallel load?

reactjs

asynchronous

code-splitting

react-suspense