Muidugi, siin on teie küsitud teave.
Laisk laadimine lehekülgedel on kaasaegne veebiarendustehnika, mis on populaarne oma tõhususe ja asjakohasuse poolest suurte andmekogumite käsitlemisel. See lähenemisviis võimaldab teie Reacti rakendusel tõhusalt laadida ja kuvada suuri andmemahtusid, hankides ja muutes kasutajale nähtavaks ainult kindla osa – mida sageli nimetatakse ka leheks. See vähendab oluliselt teie rakenduse laadimisaega, pakkudes paremat kasutuskogemust.
See tehnika on väga kasulik praegusel digiajastul, kus kasutajad nõuavad reaalajas reageerimist ja paremat kasutuskogemust. Peamised eelised hõlmavad rakenduse suuremat jõudlust, serveri väiksemat koormust ja tõhusat mälukasutust. ReactJS on palju toetavaid raamatukogusid laisk laadimine ja lehekülgede vahetamine, muutes arendusprotsessi sujuvamaks.
//dependencies
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
const fetch_data = async () => {
const res= await axios.get('https://api.demo.com/data?page=${page}');
setData(oldData => [...oldData, ...res.data]);
};
fetch_data();
}, [page]);
// then, you can add scroll listener - when the user reaches the end of the page, increment the page by 1.
return (
<div className="App" onScroll={(e) => handleScroll(e)}>
{your code here}
</div>
);
}
export default App;
Koodeksi mõistmine
Kood demonstreerib Reactis laisa laadimise lehekülgede muutmise lihtsat rakendamist. UseEffecti konks tagab, et komponendi ühendamisel esitatakse serverile HTTP-päring andmete toomiseks. See võtab 'lehte' kui sõltuvust. Lehe olek määrab serverist hangitava andmehulga, luues tõhusalt lehekülgede jagamise süsteemi.
Funktsioon setData liidab varasemad andmed äsja toodud andmetega. See tagab, et varasemad andmed on uute andmete lisamise ajal endiselt olemas, säilitades sujuva kerimise.
Lehtede lehitsemine koos laiska laadimisega toob uusi andmeid ainult vajaduse korral, parandades oluliselt jõudlust. See on eriti oluline suurte andmemahtude käsitlemisel.
Populaarsed raamatukogud laiska lehekülgede laadimise jaoks
Saadaval on mitu teeki, mis hõlbustavad teie Reacti rakendustes laiska laadimist ja lehekülgede vahetamist.
- React Infinite Scroll Component: See on populaarne npm-pakett lõpmatu kerimise rakendamiseks Reactis.
- Reageerimine virtualiseeritud: See on Reacti komponentide komplekt suurte loendite, tabeliandmete ja muu tõhusaks renderdamiseks. See sisaldab komponenti lõpmatu laadimise tõhusaks käsitlemiseks.
- Reageerimisaken: Veel üks teek suurte loendite või tabeliandmete palju tõhusamaks renderdamiseks. See on React Virtualizediga võrreldes väiksem ja kiirem ning peaaegu sarnase API-ga.
Laisa laadimise lehekülgede lisamine parandab nii teie rakenduse mastaapsust kui ka kasutajakogemust. Kuna kasutajaliidese trendid arenevad jätkuvalt, on oluline olla kursis moodsate tehnikatega, nagu laisk laadimine ja lehekülgede otsimine. Pidage alati meeles, et lõppeesmärk on pakkuda kasutajatele kiireid, tõhusaid ja nauditavaid kogemusi.
