Подобрете ефективността на приложението си, като интегрирате базираната на страници система за страниране в React.
Уеб приложенията управляват големи количества данни. Например, приложенията за електронна търговия показват милиарди данни по начин, който е едновременно организиран и визуално привлекателен. По същество данните трябва да бъдат представени по начин, който е лесен за разбиране и навигация от потребителите.
Изобразяването на всички данни на една страница обаче може да доведе до проблеми с производителността, по-бавно време за зареждане и лошо потребителско изживяване. Поради тази причина прилагането на логика за страниране може значително да облекчи тези проблеми.
В React можете да изберете да използвате предварително изградени компоненти, предоставени от библиотеки за страниране, като алтернатива можете да изградите персонализирана система за страниране, използвайки куки за React.
Внедряване на страниране от страна на клиента
Има два начина за прилагане на страниране в приложения: страниране от страна на клиента и от страна на сървъра. Въпреки това, независимо от формата, който изберете, основната концепция остава същата. Пагинацията от страна на клиента включва обработка на логиката за страниране от страна на клиента, в браузъра на потребителя.
Можете да реализирате страниране от страна на клиента, като използвате различни техники. Тези техники включват:
- Пагинация на базата на страници: Този метод включва разделяне на данните на части или страници с фиксиран размер, като обикновено показва определен брой елементи на страница. Потребителите могат да навигират през страниците, като използват навигационни връзки или бутони, обозначени с номера на страници или бутони за предишна и следваща страница. Това е популярна реализация в търсачките и приложенията за електронна търговия.
- Безкрайно превъртане: Този метод включва динамично зареждане и изобразяване на нови данни, докато потребителят превърта надолу по страницата, създавайки безпроблемно и непрекъснато сърфиране. Тази техника е особено полезна, когато се работи с големи набори от данни, които непрекъснато се разширяват, като емисии в социалните медии.
Внедряване на базирано на страница пагиниране с помощта на React Hooks
За да започнете, създайте проект в React. Можете или да използвате create-react-app JavaScript команда за настройка на основно приложение Reactлокално или използвайте Vite за скеле на React проект на вашата машина.
Този урок е използвал Vite, можете да намерите кода на този проект тук GitHub хранилище.
След като настроите вашия React проект, нека продължим с внедряването на базирано на страници пагиниране използвайки React Hooks.
Конфигуриране на набора от данни
В идеалния случай обикновено извличате и показвате данни от база данни. За този урок обаче ще извлечете данни от манекен JSONPlaceholder API вместо.
В src директория, създайте нова компоненти/пагинация файл и добавете следния код.
- Създайте функционален компонент на React и дефинирайте следните състояния.
импортиране Реагирайте, {useEffect, useState} от"реагира";
импортиране"./style.component.css";функцияПагинация() {
конст [данни, setData] = useState([]);конст [currentPage, setcurrentPage] = useState(1);
конст [itemsPerPage, setitemsPerPage] = useState(5);конст [pageNumberLimit, setpageNumberLimit] = useState(5);
конст [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
конст [minPageNumberLimit, setminPageNumberLimit] = useState(0);
връщане (
<>Компонент за пагинация</h1>
>
</>
);
}износпо подразбиране Пагинация; - Приложете логиката за извличане на данни от фиктивния API. Вътре в Пагинация компонент, добавете по-долу.
Кодът по-горе служи за две основни цели. Първо, след като компонентът се монтира, useEffect задействащи задействания за извличане на данни от външната крайна точка на API, които след това се преобразуват във формат JSON. След това получените JSON данни се използват за актуализиране на данни променлива на състоянието с извлечените данни за задачи. На второ място, displayData ще вземе извлечените данни като аргумент и ще изобрази данните като неподреден списък със задачи.useEffect(() => {
извличане (" https://jsonplaceholder.typicode.com/todos")
.тогава((отговор) => response.json())
.тогава((json) => setData (json));
}, []);конст displayData = (данни) => {
връщане (
{data.length > 0 &&
data.map((todo, индекс) => {
връщане<лиключ={index}>{todo.title}ли>;
})}
</ul>
);
}; - В връщащия сегмент на Пагинация компонент, включват displayData функция за изобразяване на извлечените данни в браузъра. Ето актуализирана версия на кода:
Чрез обаждане displayData (данни) в рамките на JSX елемента и предаване на данни променлива на състоянието като параметър, тогава функцията ще изобрази извлечените данни като неподреден списък в браузъра.връщане (
<>Компонент за пагинация</h1>
>
{displayData (данни)}
</>
);
В този конкретен случай представеният списък се състои от двеста задачи. В сценарии от реалния свят обаче приложенията ще управляват големи количества данни. Показването на всички тези данни на една уеб страница може да доведе до проблеми с производителността, като бавно зареждане и цялостна лоша производителност на приложението.
За да се реши това, би било подходящо да се включи функционалност за страниране, за да се гарантира, че всяка страница съдържа ограничен брой елементи, до които потребителите могат да имат достъп отделно чрез бутоните за навигация.
Този подход позволява на потребителите да навигират в данните по по-управляем и организиран начин, подобрявайки цялостната производителност и потребителското изживяване на приложението.
Внедряване на логика за пагиниране за показване на ограничен брой елементи на страница
За да определим кои елементи от задачи ще се визуализират на всяка страница, трябва да внедрим необходимата логика. Въпреки това, преди да продължите, важно е да определите общия брой необходими страници въз основа на наличните задачи.
За да постигнете това, можете да добавите следния код към Пагинация компонент:
конст страници = [];
за (позволявам аз = 1; аз <= математика.ceil (data.length / itemsPerPage); i++) {
pages.push (i);
}Кодовият фрагмент по-горе преминава през данни масив, като се изчислява общият брой необходими страници чрез разделяне на дължината на данни масив от желания брой елементи на страница—първоначалният брой елементи на страница е зададен на пет в елементи на страница състояние.
Въпреки това можете да актуализирате този номер според нуждите, за да тествате логиката. Накрая всеки номер на страница се добавя към страници масив. Сега нека приложим логиката за показване на брой елементи на страница.
конст indexOfLastItem = currentPage * itemsPerPage;
конст indexOfFirstItem = indexOfLastItem - itemsPerPage;
конст pageItems = data.slice (indexOfFirstItem, indexOfLastItem);Този код определя въз основа на задачите, които да се визуализират на страницата на браузъра текуща страница и елементи на страница променливи—той извлича съответните индекси за набора от задачи от масива с данни, като използва метода на срез. След това индексите се използват за извличане на конкретните задачи, които принадлежат към желаната страница.
Сега, за да покажете задачите, актуализирайте displayData функция чрез предаване на pageItems като параметър. Ето актуализирана версия на кода:
връщане (
<>
Компонент за пагинация</h1>
>
{displayData (pageItems)}
</>
);
Правейки тази актуализация, displayData ще изобрази по подходящ начин ограничен брой задачи, отразяващи текущата страница.
Рационализиране на достъпа до страницата и навигацията с бутони за навигация
За да сте сигурни, че потребителите лесно навигират и имат достъп до съдържанието на различни страници, трябва да добавите предишни и следващи бутони, както и бутони, които указват конкретни номера на страници.
Първо, нека приложим логиката за бутоните с номера на страниците. В Пагинация компонент, добавете кода по-долу.
конст handleClick = (събитие) => {
setcurrentPage(Номер(event.target.id));
};
конст renderPageNumbers = pages.map((номер) => {
ако (число < maxPageNumberLimit +1 && номер > minPageNumberLimit) {
връщане (
ключ={номер}
id={номер}
onClick={handleClick}
className={currentPage == номер? "активен": нула}
>
{номер}
</li>
);
} друго {
връщаненула;
}
});
The handleClick функцията се задейства, когато потребител щракне върху бутон с номер на страница. След това това действие актуализира текуща страница променлива на състоянието с избрания номер на страница.
The renderPageNumbers променливата използва карта метод за повторение на страници масив и динамично генерира елементи от списък, представляващи всеки номер на страница. Той прилага условна логика, за да определи кои номера на страници да бъдат изобразени въз основа на дефинираните ограничения за максимален и минимален брой страници.
Накрая добавете кода за следващия и предишния бутон.
конст handleNextbtn = () => {
setcurrentPage (currentPage + 1);
ако (текуща страница + 1 > maxPageNumberLimit) {
setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
}
};
конст handlePrevbtn = () => {
setcurrentPage (currentPage - 1);
ако ((текуща страница - 1) % pageNumberLimit == 0) {
setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
}
};
За да визуализирате бутоните за навигация, актуализирайте JSX елементите, както следва:
връщане (
<>Компонент за пагинация</h1>
>
{displayData (pageItems)}"номера на страници"
>
onClick={handlePrevbtn}
disabled={currentPage == страници[0]? вярно: невярно}
> Предишен
</button>
</li>
{renderPageNumbers}
onClick={handleNextbtn}
disabled={currentPage == страници[pages.length - 1]? вярно: невярно}
> Следващ
</button>
</li>
</ul>
</>
);
След като компонентът се изобрази, той ще покаже номерата на страниците, предишните и следващите бутони и съответните елементи с данни за текущата страница.
Избор между библиотеки за страниране и персонализирани системи за страниране
Когато става въпрос за вземане на решение между използване на библиотеки за страниране или изграждане на персонализирана система за страниране, изборът зависи от различни фактори. Библиотеките за страниране, като react-paginate, предоставят предварително изградени компоненти и функционалност, което позволява бързо и лесно внедряване.
От друга страна, изграждането на персонализирана система за страниране с помощта на куки React предлага повече гъвкавост и контрол върху логиката за страниране и потребителския интерфейс. Решението в крайна сметка ще зависи от вашите специфични нужди и предпочитания.