Uma breve análise do SuspenseList no React18 e qual a sua utilidade

Como começar rapidamente com o VUE3.0: Aprenda sobre

o passado e o presente do Suspense.

Esse recurso apareceu nas versões históricas do React. A primeira vez foi a versão 16.6, que lançou o componente Suspense que suporta divisão de código. A extração de dados agora é suportada na versão 16.9. Os alunos interessados ​​​​podem acessar o changelog do React .

O uso simples de Suspense

foi introduzido antes. Usamos apenas um exemplo para revisar o conceito e usar

// Este componente é carregado dinamicamente const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MeuComponent() {
  retornar (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OutroComponente />
      </div>
    </React.Suspense>
  );
}

Quando o componente OtherComponent ainda não possui condições de renderização, o componente passado por fallback será utilizado para renderização pré-fabricada. As manifestações específicas da falta de condições de renderização aqui são que o tempo de aquisição de dados é Suspense , a estrutura do componente é complexa, etc., mas não queremos que isso afete a renderização da primeira tela ou a inicialização do aplicativo. introduziu-o, por isso não entrarei em detalhes.

O que é SuspenseList

pode ser facilmente entendido literalmente. Ou seja, se houver vários Suspense em nosso código, como devemos controlar sua ordem e método de exibição? Portanto, React nos fornece oficialmente o componente SuspenseList .

<SuspenseList revelaOrder="encaminha">
  <Suspense fallback={'Carregando...'}>
    <ID da imagem do perfil={1} />
  </Suspenso>
  <Suspense fallback={'Carregando...'}>
    <ID da imagem do perfil={2} />
  </Suspenso>
  <Suspense fallback={'Carregando...'}>
    <ID da imagem do perfil={3} />
  </Suspenso>
  ...
</SuspenseList>

Vamos primeiro apresentar os dois únicos Props de SuspenseList

• forwards

forwards backwards together revealOrder carregamento de sub Suspense .

• para trás, independentemente da velocidade da solicitação. Exibir primeiro para trás

• backwards o oposto de avançar.

• together , significa que todos os suspenses são exibidos ao mesmo tempo quando estão prontos, em vez de exibi-los um por um

tail itens descarregados em SuspenseList

Por padrão, SuspenseList exibirá todos os fallbacks

• collapsed

• SuspenseList lista

e exibirá apenas a lista O próximo

projeto fallback hidden descarregado não exibe nenhuma informação

ps: SuspenseList só funciona no Suspense ou SuspenseList do subnível direto. e não funcionará nos nós netos.

A função de SuspenseList

SuspenseList nos permite realizar orquestração composta de um grupo de comportamentos Suspense Embora a demonstração na demonstração seja relativamente simples, em um projeto relativamente grande, geralmente usamos Layout para layout. Veja nossas plataformas comuns de gerenciamento de middle e back-end e a página principal do lado C como exemplo.

Nos sistemas intermediários e back-end, geralmente usamos o método de barra superior + barra lateral + layout da página principal. Nesse nível, a indústria atual pratica principalmente rotinas micro-front-end, como qiankun.js , incluindo o. a equipe do autor explorou um conjunto de sistema próprio de implementação de micro front-end. Se você estiver em uma página C-side, pode não ser apropriado usar um método micro front-end. Se houver requisitos para renderização de vários blocos na página, você pode usar SuspenseList e Suspense combinados com a capacidade de back-end React. para renderizar SSR para obter renderização de bloco independente de uma forma mais sistemática. Efeitos da ordem e comportamento de carregamento.