Apakah tindak balas malas memuatkan

Pemuatan malas bertindak balas bermakna ia tidak akan dimuatkan, tetapi akan dimuatkan hanya apabila sekeping kod tertentu, komponen tertentu atau gambar tertentu digunakan sebab pemuatan malas diperlukan adalah kerana terlalu banyak beban dimuatkan pada masa yang sama pada skrin pertama Kandungan akan menyebabkan masalah seperti ketinggalan, tindak balas lambat, dan masa menunggu pengguna yang lama boleh digunakan untuk mengoptimumkan ini.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah reaksi malas memuatkan?

React malas memuatkan

1. Mengapa anda memerlukan pemuatan malas?

Pemuatan malas: Ia tidak akan pramuat, tetapi hanya memuatkan sekeping kod tertentu, komponen tertentu atau gambar tertentu apabila ia perlu digunakan (pemuatan tertunda)

Sebab: Terdapat banyak halaman dan kandungan Halaman yang kaya, panjang dan banyak gambar. Memuatkan terlalu banyak kandungan pada skrin pertama pada masa yang sama akan membawa kepada masalah seperti ketinggalan, tindak balas perlahan dan masa menunggu pengguna yang lama. Kami sering menggunakan mekanisme pemuatan malas untuk mengoptimumkan ini.

2. Gunakan lazy loading

Guna React.lazy to load

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

Tetapi halaman ini akan melaporkan ralat. Mesej ralat ini mengingatkan kami bahawa selepas React menggunakan malas, akan terdapat jurang pemuatan yang tidak tahu kandungan yang hendak dipaparkan semasa jurang ini, jadi kami perlu menentukannya. Langkah seterusnya ialah menggunakan penunjuk pemuatan 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>
    )
  }
}

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah tindak balas malas memuatkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!