Was ist React Lazy Loading?

React Lazy Loading bedeutet, dass es nicht vorab geladen wird, sondern nur geladen wird, wenn ein bestimmter Codeabschnitt, eine bestimmte Komponente oder ein bestimmtes Bild verwendet wird. Der Grund, warum Lazy Loading erforderlich ist, liegt darin, dass zu viel Inhalt geladen wird Dies führt zu Problemen wie langsamer Verzögerung, langsamer Reaktion und langer Wartezeit des Benutzers. Dies kann mithilfe des Lazy-Loading-Mechanismus optimiert werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was ist React Lazy Loading?

Lazy Loading reagieren

1. Was ist Lazy Loading? Warum brauchen Sie Lazy Loading?

Verzögertes Laden: Es wird nicht vorab geladen, sondern nur ein bestimmter Codeabschnitt, eine bestimmte Komponente oder ein bestimmtes Bild geladen, wenn sie verwendet werden müssen (verzögertes Laden)

Gründe: Es gibt viele Seiten, umfangreiche Inhalte und lange Seiten , und viele Bilder. Das gleichzeitige Laden von zu vielen Inhalten auf dem ersten Bildschirm führt zu Problemen wie Verzögerungen, langsamer Reaktion und langer Wartezeit des Benutzers. Um dies zu optimieren, verwenden wir häufig den Lazy-Loading-Mechanismus.

Zweitens: Verwenden Sie Lazy Loading.

Verwenden Sie React.lazy zum Laden.

//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;

Aber diese Seite meldet einen Fehler. Diese Fehlermeldung erinnert uns daran, dass es nach der Verwendung von Lazy zu einer Ladelücke kommt. React weiß nicht, welcher Inhalt während dieser Lücke angezeigt werden soll. Daher müssen wir ihn angeben. Als nächstes müssen wir den Suspense-Ladeindikator verwenden.

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>
    )
  }
}

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas ist React Lazy Loading?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!