8

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

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

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

React 会延迟加载InnerWrapperafterOuterWrapper的加载，还是同时加载它们？具体来说，是否在第一个组件加载后延迟渲染 2nd Suspense 的 fallback。

4

1 回答 1

4

React 是在加载 OuterWrapper 之后延迟加载 InnerWrapper，还是同时加载它们？具体来说，是否在第一个组件加载后延迟渲染 2nd Suspense 的 fallback。

第二个的渲染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"));
于 2019-10-26T20:14:26.787 回答