Tabbas, ga bayanin da kuka nema.
Lazy loading pagination dabara ce ta haɓaka gidan yanar gizo ta zamani, shahararriyar ingancinsa da dacewa wajen sarrafa manyan bayanan bayanai. Wannan tsarin yana ba da damar aikace-aikacen React ɗinku da kyau don ɗauka da kuma nuna adadi mai yawa na bayanai ta hanyar maidowa da ba da takamaiman yanki ga mai amfani kawai - galibi ana kiransa shafi. Yana rage girman lokacin lodin app ɗinku sosai, yana samar da ingantaccen ƙwarewar mai amfani.
Wannan dabarar tana da fa'ida sosai a cikin zamanin dijital na yanzu, inda masu amfani ke buƙatar martani na ainihi da ƙwarewar mai amfani. Babban fa'idodin sun haɗa da haɓaka aikin app, rage nauyin uwar garken, da ingantaccen amfani da ƙwaƙwalwar ajiya. Hakama yana da ɗakunan karatu da yawa waɗanda ke tallafawa ragwan lodi da pagination, sa tsarin ci gaba ya fi sauƙi.
//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;
Fahimtar Code
Lambar tana nuna sauƙin aiwatar da raɗaɗin raɗaɗi a cikin React. Ƙungiya ta UseEffect tana tabbatar da cewa lokacin da ɓangaren ke hawa, ana yin buƙatar HTTP zuwa uwar garken don dawo da bayanai. Yana ɗaukar 'shafi' azaman abin dogaro. Yanayin shafin yana ƙayyade gunkin bayanan da za a dawo dasu daga uwar garken, yadda ya kamata ƙirƙirar tsarin fagina.
Aikin saitinData yana haɗa bayanan da suka gabata tare da sabbin bayanan da aka samo. Wannan yana tabbatar da cewa bayanan da suka gabata har yanzu suna nan yayin da ake ƙara sabbin bayanai, tare da kiyaye gogewar gungura ruwa.
Pagination haɗe tare da malalacin lodawa kawai yana ɗaukar sabbin bayanai idan ya cancanta, yana haɓaka aiki sosai. Wannan yana zuwa musamman wasa lokacin da ake mu'amala da manyan bayanai.
Shahararrun Dakunan karatu don Rage Loading Pagination
Akwai dakunan karatu da yawa da ke akwai waɗanda zasu iya sauƙaƙa aiwatar da ɗora nauyi da fage a cikin aikace-aikacen React ɗinku:
- Amsa Ƙarshen Gungura Mara iyaka: Wannan sanannen fakitin npm ne don aiwatar da gungura mara iyaka a cikin React.
- Maida Hankali: Wannan saitin abubuwan da aka gyara na React ne don samar da ingantaccen lissafin manyan jeri, bayanan tambura da ƙari. Ya haɗa da wani sashi don sarrafa inganci mara iyaka.
- Tagan martani: Wani ɗakin karatu don yin manyan jeri ko bayanan tambura sosai da inganci. Yana da ƙarami da sauri idan aka kwatanta da React Virtualized, tare da kusan API mai kama da shi.
Haɗa fage na loading malalaci yana haɓaka haɓakar aikace-aikacenku da ƙwarewar mai amfani. Yayin da yanayin mu'amalar mai amfani ke ci gaba da haɓakawa, yana da mahimmanci a ci gaba da sabuntawa tare da fasahohin zamani kamar ɗora nauyi da fage. Koyaushe tuna, babban burin shine samar da masu amfani da sauri, inganci, da gogewa mai daɗi.
