Qu'est-ce que le chargement paresseux de réaction

Le chargement paresseux de React signifie qu'il ne sera pas préchargé, mais sera chargé uniquement lorsqu'un certain morceau de code, un certain composant ou une certaine image est utilisé ; la raison pour laquelle le chargement paresseux est nécessaire est parce que trop de contenu est chargé ; le premier écran en même temps, ce qui entraînera des problèmes tels qu'un décalage lent, une réponse lente et un long temps d'attente de l'utilisateur. Un mécanisme de chargement paresseux peut être utilisé pour optimiser cela.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Qu'est-ce que le chargement différé de réaction ?

Réagir au chargement paresseux

1. Qu'est-ce que le chargement paresseux ? Pourquoi avez-vous besoin d'un chargement paresseux ?

Chargement paresseux : Il ne précharge pas, mais charge uniquement un certain morceau de code, un certain composant ou une certaine image lorsqu'ils doivent être utilisés (chargement différé)

Raisons : Il y a beaucoup de pages, un contenu riche, des pages longues , et de nombreuses photos. Charger trop de contenu sur le premier écran en même temps entraînera des problèmes tels qu'un décalage, une réponse lente et un long temps d'attente de l'utilisateur. Nous utilisons souvent le mécanisme de chargement différé pour optimiser cela.

Deuxièmement, utilisez le chargement paresseux

Utilisez React.lazy pour charger

//OtherComponent.js 文件内容
 
import React from 'react'
const OtherComponent = ()=>{
  return (
    <div>
      我已加载
    </div>
  )
}
export default OtherComponent
 
// App.js 文件内容
import React from &#39;react&#39;;
import &#39;./App.css&#39;;
 
 
//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import(&#39;./OtherComponent&#39;));
 
 
function App() {
  return (
    <div className="App">
      <OtherComponent/>
    </div>
  );
}
export default App;

Mais cette page signalera une erreur. Ce message d'erreur nous rappelle qu'après l'utilisation de Lazy, il y aura un intervalle de chargement. React ne sait pas quel contenu afficher pendant cet intervalle, nous devons donc le spécifier. Ensuite, nous devons utiliser l’indicateur de chargement Suspense.

import React, { Suspense, Component } from 'react';
import './App.css';
 
//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));
 
export default class App extends Component {
  state = {
    visible: false
  }
  render() {
    return (
      <div className="App">
        <button onClick={() => {
          this.setState({ visible: true })
        }}>
       
        </button>
           加载OtherComponent组件
        <Suspense fallback={<div>Loading...</div>}>
          {
            this.state.visible
              ?
              <OtherComponent />
              :
              null
          }
        </Suspense>
      </div>
    )
  }
}

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!