Вызывают ли вложенные компоненты Suspense последовательную или параллельную нагрузку? - PullRequest
Новая
       32

Вызывают ли вложенные компоненты Suspense последовательную или параллельную нагрузку?

4 голосов
/ 26 октября 2019

Я понимаю, что компоненты Suspense - это React-ian-подход к разбиению кода , который ускоряет загрузку веб-страниц. Теперь предположим, что у вас есть иерархия компонентов, подобная этой: 

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

Предположим сначала, что только InnerWrapper загружен с отложенной загрузкой, а во втором случае они оба загружены с отложенной загрузкой.

Реактивно отложить загрузку InnerWrapper после загрузки OuterWrapper, или они оба загружены одновременно? В частности, откладывается ли откат откатов 2-го Suspense после загрузки первого компонента.

1 Ответ

2 голосов
/ 26 октября 2019

Отражает ли React загрузку InnerWrapper после загрузки OuterWrapper, или они оба загружаются одновременно? В частности, откладывается ли рендеринг откатов второй приостановки после загрузки первого компонента.

Рендеринг второго 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"));
...