Како додати бесконачно померање у Реацт.јс

Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.

Да ли сте икада наишли на веб локацију или апликацију која учитава и приказује више садржаја док скролујете? То је оно што називамо бесконачним свитком.

Бесконачно померање је популарна техника која смањује број учитавања страница. Такође може да омогући лакше корисничко искуство, посебно на мобилним уређајима.

Постоји неколико различитих начина на које можете имплементирати бесконачно померање у Реацт.јс. Један од начина је коришћење библиотеке као што је реацт-инфините-сцролл-цомпонент. Ова библиотека обезбеђује компоненту која ће покренути догађај када корисник скролује до дна странице. Затим можете користити овај догађај за учитавање више садржаја.

Други начин за имплементацију бесконачног померања је коришћење уграђених функција које Реацт пружа. Једна таква функција је „цомпонентДидМоунт“ коју Реацт позива када се компонента први пут монтира.

Ову функцију можете користити да учитате прву серију података, а затим да користите функцију „цомпонентДидУпдате“ да учитате више података када корисник скролује надоле. Можете такође

користите Реацт куке да додате функцију бесконачног померања.

Да бисте користили компоненту реацт-инфините-сцролл-цомпонент, прво морате да је инсталирате користећи нпм:

нпм инсталирај реаговати бесконачно-свитак-саставни део --сачувати

Затим га можете увести у своју Реацт компоненту.

увоз Реаговати из 'реаговати'
увоз Бесконачно померање из 'реацт-инфините-сцролл-цомпонент'
класаАпликацијапротежеРеаговати.Саставни део{
конструктор() {
супер()
ово.стате = {
ставке: [],
 има више: истина
 }
 }
цомпонентДидМоунт() {
ово.фетцхДата(1)
 }
фетцхДата = (страница) => {
конст невИтемс = []
за (дозволити и = 0; и < 100; и++) {
нове ставке.пусх(и )
 }
иф (страна 100) {
ово.сетСтате({ има више: лажно })
 }
ово.сетСтате({ ставке: [...тхис.стате.итемс, ...невИтемс] })
 }
дати, пружити() {
повратак (
<див>
<х1>Бесконачно померање</h1>
<Бесконачно померање
 датаЛенгтх={ово.стате.итемс.ленгтх}
 нект={ово.фетцхДата}
 хасМоре={ово.стате.хасМоре}
 лоадер={<х4>Учитавање...</h4>}
 ендМессаге={
<п стиле={{ тектАлигн: 'центар' }}>
<б>То, бре! Све сте видели</б>
</п>
 }
>
 {ово.стате.итемс.мап((ставка, индекс) => (
<див кључ={индек}>
 {итем}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
извозУобичајено Апликација

Овај код почиње увозом Реацт-а и компоненте ИнфинитеСцролл из библиотеке компоненти реацт-инфините-сцролл-цомпонент. Затим креира компоненту са стањем и иницијализује стање са празним ставке низ и а има више заставица постављена на труе.

У методи животног циклуса цомпонентДидМоунт, позивате фетцхДата метод са а страна параметар од 1. Метода фетцхДата упућује АПИ позив да добије неке податке. Овај пример само генерише неке лажне податке. Затим креира низ од 100 ставки.

Ако је параметар странице 100, нема више ставки, па поставите ознаку хасМоре на фалсе. Ово ће спречити компоненту ИнфинитеСцролл да врши даље АПИ позиве. На крају, подесите стање користећи нове податке.

Метода рендеровања користи компоненту ИнфинитеСцролл и преноси неке пропс. ДатаЛенгтх проп је постављен на дужину низа ставки. Следећи пропс је постављен на методу фетцхДата. ХасМоре проп је постављен на хасМоре заставицу. Подлога за учитавање узрокује да компонента прикаже свој садржај као индикатор учитавања. Исто тако, приказаће ендМессаге проп као поруку када се сви подаци заврше са учитавањем.

Постоје и други реквизити које можете проследити компоненти ИнфинитеСцролл, али ово су они које ћете најчешће користити.

Коришћење уграђених функција

Реацт такође има неке уграђене методе које можете користити за имплементацију бесконачног померања.

Први метод је цомпонентДидУпдате. Реацт позива овај метод након што је ажурирала компоненту. Можете користити овај метод да проверите да ли је корисник скроловао до дна странице и, ако јесте, учитајте још података.

Други метод је свитак, који Реацт позива када корисник скролује. Можете користити овај метод да бисте пратили положај померања. Ако је корисник скроловао до дна странице, тада можете учитати још података.

Ево примера како можете да користите ове методе за имплементацију бесконачног померања:

увоз Реагујте, {усеСтате, усеЕффецт} из 'реаговати'
функцијаАпликација() {
конст [итемс, сетИтемс] = усеСтате([])
конст [хасМоре, сетХасМоре] = усеСтате(истина)
конст [страница, сетПаге] = усеСтате(1)
усеЕффецт(() => {
 фетцхДата (страница)
 }, [страна])
конст фетцхДата = (страница) => {
конст невИтемс = []
за (дозволити и = 0; и < 100; и++) {
нове ставке.пусх(и)
 }
иф (страна 100) {
 сетХасМоре(лажно)
 }
сетИтемс([...предмети, ...нови предмети])
 }
конст онСцролл = () => {
конст сцроллТоп = документ.доцументЕлемент.сцроллТоп
конст сцроллХеигхт = документ.доцументЕлемент.сцроллХеигхт
конст цлиентХеигхт = документ.доцументЕлемент.цлиентХеигхт
ако (сцроллТоп + цлиентХеигхт >= висина померања) {
 сетПаге (страница + 1)
 }
 }
усеЕффецт(() => {
 виндов.аддЕвентЛистенер('свитак', онСцролл)
 ретурн () => виндов.ремовеЕвентЛистенер('свитак', онСцролл)
 }, [ставки])
повратак (
<див>
 {итемс.мап((ставка, индекс) => (
<див кључ={индек}>
 {итем}
</div>
 ))}
</div>
 )
}
извозУобичајено Апликација

Овај код користи кукице усеСтате и усеЕффецт за управљање стањем и нежељеним ефектима.

У кукици усеЕффецт, она позива методу фетцхДата са тренутном страницом. Метода фетцхДата упућује АПИ позив да добије неке податке. У овом примеру, ви само генеришете неке лажне податке да бисте демонстрирали технику.

Петља фор попуњава низ невИтемс са 100 целих бројева. Ако је параметар странице 100, поставите ознаку хасМоре на фалсе. Ово ће спречити компоненту ИнфинитеСцролл да врши даље АПИ позиве. На крају, подесите стање са новим подацима.

Метода онСцролл прати позицију померања. Ако је корисник скроловао до дна странице, можете учитати више података.

УсеЕффецт кука додаје слушалац догађаја за догађај померања. Када се покрене догађај скроловања, он позива методу онСцролл.

Постоје предности и недостаци коришћења бесконачног скроловања. Може помоћи у побољшању корисничког интерфејса, чинећи глаткије искуство, посебно на мобилним уређајима. Међутим, то такође може довести до тога да корисници пропусте садржај јер се можда неће померити довољно далеко да би га видели.

Важно је одмерити предности и недостатке технике бесконачног скроловања пре него што га примените на веб-сајту или у апликацији.

Додавање бесконачног померања на вашу веб локацију или апликацију Реацт.јс може помоћи да се побољша корисничко искуство. Са бесконачним померањем, корисници не морају да кликну да би видели више садржаја. Коришћење Инфините Сцролл у вашој апликацији Реацт.јс такође може помоћи да се смањи број учитавања страница, што може побољшати перформансе.

Такође можете лако бесплатно да примените своју Реацт апликацију на Гитхуб странице.