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

Question

我知道 Suspense 组件是 React-ian代码拆分方法，它使网页加载速度更快。现在，假设您有一个像这样的组件层次结构：

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

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

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

Answer 1

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

第二个的渲染Suspense将延迟到OuterWrapper。你OuterWrapper小时候传递给的一切：

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

传递到将要渲染的时间OuterWrapper。props.children因此，第二个的渲染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"));