Uma maneira comum de reagir aos componentes de carga de forma assíncrona

Pergunte a si mesmo mais alguns porquês todos os dias e você sempre obterá resultados inesperados. O caminho de crescimento de um novato Xiaobai (copiador)

Antes da versão 16.6 do react, era usado react-loadablepara implementar o carregamento assíncrono de componentes; foi lançado na versão 16.6 Suspensepara implementar o carregamento assíncrono de componentes

Dê uma olhada na implementação dos dois métodos separadamente.

carregável por reação

react-loadable é uma biblioteca de terceiros, por isso precisa ser instalada

Instalar

npm install  react-loadable

uso básico

//一般的组件的使用
import Home from '@/pages/home'
<Route path="/home" component={
    
    Home} />
    
    
//异步加载组件
import Loadable from 'react-loadable'
<Route path="/home" component={
    
    Loadabel({
    
    
    loader: () => import('@/pages/home'),
    loading: loading   //loading组件
})}>

Encapsule funções e processe componentes assíncronos da mesma maneira
. O método de escrita acima é um pouco complicado e inchado sempre que há muitos componentes. Portanto, uma função é encapsulada para processamento unificado. Ao usar componentes, você só precisa importá-los.

//utils/loadable.js

import Loadable from 'react-loadable'

export default (loader) => {
    
    
    return Loadable({
    
    
        loader,
        loading:   //可以自己写一个加载组价
        loading() {
    
    
        	return <div>正在加载组件</div>
    	},
        delay: 200
                
    })
}

Com um conjunto delay, mostramos apenas quando leva mais de 200ms para carregar loading, essa é uma boa maneira de evitar componentes de carregamento "piscando" quando as solicitações são concluídas rapidamente

import loadable from '@/utils/loadable'

//异步加载组件
const Home = loadable(() => import('@/pages/Home'))

suspense

React.Suspense é um recurso recém-adicionado à biblioteca principal do React

Perceber:

React.lazyE a tecnologia Suspense ainda não oferece suporte à renderização do lado do servidor. Se você quiser usá-lo em um aplicativo que usa renderização do lado do servidor, recomendamos a biblioteca de componentes carregáveis . Ele tem um ótimo guia de empacotamento de renderização do lado do servidor .

uso básico

import {
    
     Suspense, lazy } from 'react'

const Home = lazy(() => import('@/pages/Home'))

//lazy必须要在Suspense包裹中使用
<Suspense>
      <Route path="/home" component={
    
    Home} />
</Suspense>

Claro, isso também suporta o carregamento de componentes de carregamento. fallbackA propriedade aceita qualquer elemento React que você deseja exibir durante o carregamento do componente

<Suspense fallback={
    
    <div>正在加载组件</div>}>
      <Route path="/home" component={
    
    Home} />
</Suspense>

Ainda não é suportado no Suspense delay这种延迟功能, portanto, a cintilação não pode ser evitada. Se você quiser lidar com isso, precisará fallbackescrever manualmente a lógica do código no componente e não carregar o componente de carregamento dentro de um determinado período de tempo.

Resumir

Os itens acima são os componentes de carregamento assíncrono que são frequentemente usados ​​em projetos. Eu acho que pode ser usado, de acordo com a própria escrita.

Vantagens do Suspense :

• Tamanho de embalagem menor (porque é uma biblioteca de terceiros)
• A biblioteca principal integrada no react é mais fácil de manter do que em terceiros

Vantagens do React-Loadable :

• Você pode definir o tempo de atraso, basta configurá-lo
• pode ser usado no lado do servidor