Главная страница>Учебник по веб-дизайну>Учебник по Javascript

Краткий анализ SuspenseList в React18 и для чего он используется

Автор：Eve Cole Время обновления：2022-08-30 09:31:44
В этой статье вы узнаете о SuspenseList в React18 и познакомитесь с ролью SuspenseList. Надеюсь, она будет вам полезна!

Как быстро начать работу с VUE3.0: узнайте о

прошлом и настоящем Suspense.

Эта функция появилась в исторических версиях React. Впервые была версия 16.6, в которой был выпущен компонент Suspense , поддерживающий разделение кода. Извлечение данных теперь поддерживается в версии 16.9. Заинтересованные студенты могут перейти к changelog React .

Простое использование Suspense

было представлено ранее. Мы используем только пример для рассмотрения концепции и использования

// Этот компонент динамически загружается const OtherComponent = React.lazy(() => import('./OtherComponent'));

функция МойКомпонент() {
  возвращаться (
    <React.Suspense Fallback={<Spinner />}>
      <дел>
        <ДругойКомпонент />
      </div>
    </React.Suspense>
  );
}

Если у компонента OtherComponent еще нет условий отрисовки, компонент, переданный в качестве fallback будет использоваться для предварительной отрисовки. Конкретными проявлениями отсутствия условий рендеринга здесь являются длительное время сбора данных, сложная структура компонентов и т. д., но мы не хотим, чтобы это влияло на рендеринг первого экрана или инициализацию приложения. Предыдущая статья Suspense . представил его, поэтому не буду вдаваться в подробности.

Что такое SuspenseList,

можно легко понять буквально. То есть, если в нашем коде несколько Suspense , как нам управлять их порядком отображения и методом отображения? Поэтому React официально предоставляет нам компонент SuspenseList .

<SuspenseList showOrder="forwards">
  <Приостановка ожидания={'Загрузка...'}>
    <ProfilePicture id={1} />
  </Саспенс>
  <Приостановка ожидания={'Загрузка...'}>
    <ProfilePicture id={2} />
  </Саспенс>
  <Приостановка ожидания={'Загрузка...'}>
    <ProfilePicture id={3} />
  </Саспенс>
  ...
</SuspenseList>

Props SuspenseList

revealOrder forwards together backwards Suspense

  • forwards назад, независимо от скорости запроса. Отображение в обратном направлении в первую очередь

  • backwards прямому отображению.

  • together означает, что все приостановки отображаются одновременно, когда они готовы, вместо отображения их по одному.

tail , как отображать поведение. выгруженные элементы в SuspenseList

    По умолчанию SuspenseList отображает все резервные копии

  • в collapsed

  • SuspenseList

    • и отображает только список. Следующий резервный

hidden выгруженный проект не отображает никакой информации.

PS: SuspenseList работает только с Suspense или SuspenseList прямого подуровня. и не будет работать на дочерних узлах.

Роль SuspenseList

SuspenseList позволяет нам выполнять составную оркестровку группы поведений Suspense . Хотя демонстрационная версия относительно проста, в относительно большом проекте мы часто используем Layout для макета. В качестве примера возьмем наши общие платформы управления промежуточной и серверной частью, а также главную страницу C-стороны.

1.png

2.jpg

В промежуточных и серверных системах мы часто используем метод макета верхней панели + боковой панели + главной страницы. На этом уровне в настоящее время в отрасли в основном практикуются процедуры микро-интерфейса, такие как qiankun.js , в том числе. авторский коллектив изучил набор собственной микро-фронтенд-системы. Если вы находитесь на странице C, возможно, нецелесообразно использовать метод микроинтерфейса. Если на странице есть требования к многоблочному рендерингу, вы можете использовать SuspenseList и Suspense в сочетании с возможностями серверной части React. для рендеринга SSR для достижения независимого рендеринга блоков более систематическим образом. Влияние порядка и поведения загрузки.
Связанные статьи