Un breve análisis de SuspenseList en React18 y para qué sirve

Cómo comenzar rápidamente con VUE3.0: conozca

el pasado y el presente de Suspense.

Esta característica apareció en las versiones históricas de React. La primera vez fue la versión 16.6, que lanzó el componente Suspense que admite la división de código. La extracción de datos ahora es compatible con la versión 16.9. Los estudiantes interesados ​​pueden pasar al changelog de React .

El uso simple de Suspense

se ha introducido antes. Solo usamos un ejemplo para revisar el concepto y el uso

// Este componente se carga dinámicamente const OtherComponent = React.lazy(() => import('./OtherComponent'));

función MiComponente() {
  devolver (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtroComponente/>
      </div>
    </React.Suspense>
  );
}

Cuando el componente OtherComponent aún no tiene condiciones de representación, el componente pasado por fallback se utilizará para la representación prefabricada. Las manifestaciones específicas de la falta de condiciones de renderizado aquí son Suspense el tiempo de adquisición de datos es largo, la estructura del componente es compleja, etc., pero no queremos que esto afecte el renderizado de la primera pantalla o la inicialización de la aplicación. Lo ha presentado, por lo que no entraré en detalles.

¿Qué es SuspenseList

se puede entender fácilmente de forma literal? Es decir, si hay varios Suspense en nuestro código, ¿cómo debemos controlar su orden de visualización y su método de visualización? Por lo tanto, React nos proporciona oficialmente el componente SuspenseList .

<SuspenseList revelarOrder="adelante">
  <Reserva de suspensión={'Cargando...'}>
    <Id. de imagen de perfil={1} />
  </Suspenso>
  <Reserva de suspensión={'Cargando...'}>
    <Id. de imagen de perfil={2} />
  </Suspenso>
  <Reserva de suspensión={'Cargando...'}>
    <Id. de imagen de perfil={3} />
  </Suspenso>
  ...
</SuspenseList>

Primero introduzcamos los dos únicos Props de SuspenseList

revealOrder representa el orden de carga de los sub Suspense . Los valores opcionales son forwards , backwards y together

• forwards , que se muestran desde el frente.

tail

• se

• backwards

• together mismo tiempo cuando están listos, en lugar de mostrarlos uno por uno.

elementos descargados en SuspenseList

De forma predeterminada, SuspenseList mostrará todos los respaldos

• collapsed

• SuspenseList la lista

y solo mostrará la lista el siguiente

proyecto descargado hidden de respaldo no muestra ninguna información

ps: SuspenseList solo funciona en Suspense o SuspenseList del subnivel directo. y no funcionará en los nodos nietos.

La función de SuspenseList

SuspenseList nos permite realizar una orquestación compuesta de un grupo de comportamientos Suspense . Aunque la demostración en la demostración es relativamente simple, en proyectos relativamente grandes, a menudo usamos Layout para el diseño. Tomemos como ejemplo nuestras plataformas comunes de gestión intermedia y back-end y la página principal del lado C.

En los sistemas intermedio y back-end, a menudo utilizamos el método de diseño de barra superior + barra lateral + página principal. En este nivel, la industria actual en la industria practica principalmente rutinas de micro-front-end, como qiankun.js , incluido. El equipo del autor exploró un conjunto de sistemas de implementación de micro front-end propios. Si está en una página del lado C, puede que no sea apropiado utilizar un método de micro front-end. Si existen requisitos para la representación de múltiples bloques en la página, puede usar SuspenseList y Suspense combinados con la capacidad del backend de React. renderizar SSR para lograr una renderización de bloques independientes de una manera más sistemática Efectos del orden de carga y el comportamiento.