ဖြေရှင်းထားသည်- ပျင်းရိနေသော pagination react ကို ဖွင့်သည်။

ဟုတ်ပါတယ်၊ သင်တောင်းဆိုထားတဲ့ အချက်အလက်တွေပါ။

ပျင်းရိသော pagination ကိုဖွင့်ခြင်း။ ကြီးမားသောဒေတာအတွဲများကို ကိုင်တွယ်ရာတွင် ၎င်း၏ထိရောက်မှုနှင့် ဆက်စပ်မှုရှိသောကြောင့် ခေတ်မီဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုနည်းပညာတစ်ခုဖြစ်သည်။ ဤချဉ်းကပ်မှုသည် သင်၏ React အက်ပ်လီကေးရှင်းသည် အသုံးပြုသူမြင်နိုင်သော တိကျသောအပိုင်းကို ပြန်လည်ရယူပြီး တင်ဆက်ပေးခြင်းဖြင့် ဒေတာအမြောက်အမြားကို ထိရောက်စွာတင်ကာ ပြသနိုင်စေသည် — မကြာခဏဆိုသလို စာမျက်နှာတစ်ခုအဖြစ် ရည်ညွှန်းသည်။ ၎င်းသည် သင့်အက်ပ်၏ load time ကို သိသိသာသာ လျှော့ချပေးကာ ပိုမိုကောင်းမွန်သော အသုံးပြုသူအတွေ့အကြုံကို ပေးစွမ်းသည်။

ဤနည်းပညာသည် အသုံးပြုသူများသည် အချိန်နှင့်တပြေးညီ တုံ့ပြန်မှုများနှင့် သာလွန်ကောင်းမွန်သော အသုံးပြုသူအတွေ့အကြုံများကို လိုအပ်သည့် လက်ရှိဒစ်ဂျစ်တယ်ခေတ်တွင် အလွန်အကျိုးရှိသည်။ အဓိက အားသာချက်များတွင် အက်ပ်စွမ်းဆောင်ရည် တိုးမြှင့်ခြင်း၊ ဆာဗာဝန်ကို လျှော့ချခြင်းနှင့် ထိရောက်သော မှတ်ဉာဏ်အသုံးပြုမှုတို့ ပါဝင်သည်။ ReactJS အထောက်အပံ့ပေးသော စာကြည့်တိုက်များစွာရှိသည်။ ပျင်းရိတင် နှင့် pagination၊ ဖွံ့ဖြိုးတိုးတက်မှုလုပ်ငန်းစဉ်ကိုပိုမိုချောမွေ့စေသည်။

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

Code ကိုနားလည်ခြင်း။

ကုဒ်သည် React တွင် Lazy loading pagination ၏ ရိုးရှင်းသော အကောင်အထည်ဖော်မှုကို သရုပ်ပြသည်။ useEffect ချိတ်သည် အစိတ်အပိုင်းကို တပ်ဆင်သည့်အခါ ဒေတာပြန်လည်ရယူရန် ဆာဗာထံ HTTP တောင်းဆိုချက်တစ်ခု ပြုလုပ်ကြောင်း သေချာစေသည်။ ၎င်းသည် 'စာမျက်နှာ' ကို မှီခိုမှုအဖြစ် ယူသည်။ စာမျက်နှာအခြေအနေသည် ဆာဗာမှ ထုတ်ယူရမည့် ဒေတာအပိုင်းအစကို ဆုံးဖြတ်ပြီး စာမျက်နှာခွဲခြင်းစနစ်ကို ထိထိရောက်ရောက် ဖန်တီးပေးသည်။

setData လုပ်ဆောင်ချက်သည် ယခင်ဒေတာများကို အသစ်ရယူထားသောဒေတာနှင့် ပေါင်းစပ်ထားသည်။ ၎င်းသည် ဒေတာအသစ်များ ထပ်ထည့်စဉ်တွင် ယခင်ဒေတာများ ဆက်လက်တည်ရှိနေကြောင်း သေချာစေပြီး အရည်လှိမ့်ခြင်းအတွေ့အကြုံကို ထိန်းသိမ်းထားသည်။

ပျင်းရိသော loading နှင့် ပေါင်းစပ်ထားသော Pagination သည် လိုအပ်သည့်အခါတွင် ဒေတာအသစ်များကိုသာ ရယူနိုင်ပြီး စွမ်းဆောင်ရည်ကို အလွန်တိုးတက်စေသည်။ အထူးသဖြင့် ဒေတာပမာဏများစွာဖြင့် ကိုင်တွယ်သောအခါတွင် ၎င်းသည် ကစားရန်ဖြစ်သည်။

Lazy Loading Pagination အတွက် လူကြိုက်များသော စာကြည့်တိုက်များ

သင်၏ React အပလီကေးရှင်းများတွင် ပျင်းရိစွာ တင်ခြင်းနှင့် pagination ကို လွယ်ကူစွာ အကောင်အထည်ဖော်နိုင်သော စာကြည့်တိုက်များစွာ ရှိပါသည်-

• Infinite Scroll Component ကို တုံ့ပြန်ပါ- ဤသည်မှာ React တွင် အဆုံးမရှိ scroll ကိုအကောင်အထည်ဖော်ရန်အတွက် နာမည်ကြီး npm ပက်ကေ့ဂျ်တစ်ခုဖြစ်သည်။
• React Virtualized- ဤအရာသည် ကြီးမားသောစာရင်းများ၊ ဇယားဒေတာနှင့် အခြားအရာများကို ထိထိရောက်ရောက် တင်ဆက်ရန်အတွက် React အစိတ်အပိုင်းများအစုတစ်ခုဖြစ်သည်။ ၎င်းတွင် အဆုံးမရှိ loading ကို ထိရောက်စွာ ကိုင်တွယ်ရန်အတွက် အစိတ်အပိုင်းတစ်ခု ပါဝင်သည်။
• React Window- ကြီးမားသောစာရင်းများ သို့မဟုတ် ဇယားဒေတာကို ပိုမိုထိရောက်စွာ တင်ဆက်ရန်အတွက် အခြားစာကြည့်တိုက်။ အလားတူ API တစ်ခုပါရှိသော React Virtualized နှင့် နှိုင်းယှဉ်ပါက ပိုမိုသေးငယ်ပြီး ပိုမြန်ပါသည်။

Lazy loading pagination ကို ပေါင်းစပ်ခြင်းဖြင့် သင့်အပလီကေးရှင်း၏ အရွယ်အစားနှင့် အသုံးပြုသူ အတွေ့အကြုံကို မြှင့်တင်ပေးပါသည်။ အသုံးပြုသူ အင်တာဖေ့စ် ခေတ်ရေစီးကြောင်းများ ဆက်လက်ပြောင်းလဲလာသည်နှင့်အမျှ၊ ပျင်းရိစွာတင်ခြင်းနှင့် pagination ကဲ့သို့သော ခေတ်မီနည်းပညာများဖြင့် ခေတ်မီနေရန် လိုအပ်ပါသည်။ အမြဲတမ်း သတိရပါ၊ အန္တိမရည်မှန်းချက်မှာ သုံးစွဲသူများအား မြန်ဆန်၊ ထိရောက်ပြီး ပျော်ရွှင်ဖွယ်အတွေ့အကြုံများကို ပေးဆောင်ရန်ဖြစ်သည်။