Да ли сте икада наишли на веб локацију или апликацију која учитава и приказује више садржаја док скролујете? То је оно што називамо бесконачним померањем.
Бесконачно померање је популарна техника која може да олакша прегледавање великих количина садржаја. Такође може да омогући лакше корисничко искуство, посебно на мобилним уређајима.
Можете имплементирати бесконачно померање у Реацт-у на неколико различитих начина. Први је да користите библиотеку као што је реацт-инфините-сцролл-цомпонент. Компонента ове библиотеке покреће догађај кад год корисник скролује до дна странице. Затим можете користити овај догађај као знак за учитавање више садржаја.
Други начин за имплементацију бесконачног померања у Реацт-у је преко његових уграђених функција. Једна таква функција је „цомпонентДидМоунт“, коју Реацт позива када први пут монтира компоненту.
Ову функцију можете користити за учитавање прве серије података, након чега следи функција „цомпонентДидУпдате“ за учитавање наредних података док се корисник помера надоле.
Такође можете користити Реацт куке да додате функцију бесконачног померања.
Постоји неколико начина да се користи компонента реацт-инфините-сцролл-цомпонент.
Преглед садржаја
Инсталирајте компоненту реацт-инфините-сцролл-цомпонент
Да бисте покренули употребу, прво морате да га инсталирате преко нпм-а:
npm install react-infinite-scroll-component --save
Увезите реацт-инфините-сцролл-цомпонент у Реацт
Након инсталације, потребно је да увезете библиотеку бесконачног померања у вашу Реацт компоненту.
import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
class App extends React.Component {
constructor() {
super()
this.state = {
items: [],
hasMore: true
}
}componentDidMount() {
this.fetchData(1)
}
fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i )
}
if (page === 100) {
this.setState({ hasMore: false })
}
this.setState({ items: [...this.state.items, ...newItems] })
}
render() {
return (
<div>
<h1>Infinite Scroll</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Овај код почиње увозом Реацт-а и компоненте ИнфинитеСцролл из библиотеке компоненти реацт-инфините-сцролл-цомпонент. Затим креира компоненту са стањем и иницијализује је празним низом ставки и заставицом хасМоре постављеном на Тачно.
Подесите параметре
У методи животног циклуса цомпонентДидМоунт, морате позвати методу фетцхДата са параметром странице постављеним на 1. Метода фетцхДата упућује АПИ позив за преузимање података. Овај пример реаговања бесконачног скролера генерише неке лажне податке и креира низ од 100 ставки.
Када параметар странице достигне 100, пошто више нема ставки, можете поставити заставицу хасМоре на Фалсе. Ово спречава компоненту ИнфинитеСцролл да врши даље АПИ позиве. На крају, подесите стање користећи нове податке.
Метода рендеровања користи компоненту ИнфинитеСцролл и преноси неке пропс. ДатаЛенгтх проп је постављен на дужину низа ставки. Следећи пропс је подешен на методу фетцхДата. ХасМоре проп је постављен једнак заставици хасМоре.
Подлога за учитавање узрокује да компонента прикаже свој садржај као индикатор учитавања. Исто тако, приказаће ендМессаге проп као поруку када се сви подаци заврше са учитавањем.
Можете проследити друге реквизите компоненти ИнфинитеСцролл, али ово су они које ћете најчешће користити.
Коришћење уграђених функција
Реацт такође има неке уграђене методе које можете користити за имплементацију ИнфинитеСцролл-а.
Први метод је цомпонентДидУпдате. Реацт позива овај метод након што ажурира компоненту. Можете користити овај метод да проверите да ли је корисник скроловао до дна странице. Ако јесте, учитава више података.
Други метод је скроловање, које Реацт позива када корисник скролује. Можете користити овај метод да бисте пратили положај померања. Можете учитати више података ако је корисник скроловао до дна странице.
Ево примера Реацт бесконачног померања који вам показује како да користите ове методе:
import React, {useState, useEffect} from 'react'
function App() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(true)
const [page, setPage] = useState(1)
useEffect(() => {
fetchData(page)
}, [page])
const fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i)
}
if (page === 100) {
setHasMore(false)
}
setItems([...items, ...newItems])
}
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
if (scrollTop + clientHeight >= scrollHeight) {
setPage(page + 1)
}
}
useEffect(() => {
window.addEventListener('scroll', onScroll)
return () => window.removeEventListener('scroll', onScroll)
}, [items])
return (
<div>
{items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</div>
)
}
export default App
Овај код користи кукице усеСтате и усеЕффецт за управљање стањем и нежељеним ефектима.
Унутар куке усеЕффецт позива методу фетцхДата са тренутном страницом. Метода фетцхДата упућује АПИ позив за преузимање података. У овом примеру, ви само генеришете неке лажне податке да бисте демонстрирали технику.
Петља фор попуњава низ невИтемс са 100 целих бројева. Ако је параметар странице 100, он поставља заставицу хасМоре на Фалсе. Ово спречава компоненту бесконачног померања да врши даље АПИ позиве.
На крају, подесите стање са новим подацима.
Метода онСцролл прати позицију померања. Можете учитати више података ако корисник скролује до дна странице.
УсеЕффецт кука додаје слушалац догађаја за догађај померања. Када се покрене догађај скроловања, он позива методу онСцролл.
Постоје предности и недостаци коришћења Реацт-овог бесконачног скроловања. Побољшава кориснички интерфејс, чинећи глаткије искуство, посебно на мобилним уређајима. Међутим, то такође може довести до тога да корисници пропусте садржај јер се можда неће померити довољно далеко да би га видели.
Неопходно је одмерити предности и недостатке технике бесконачног померања пре него што је примените на своју веб локацију или апликацију.
Додавање бесконачног померања на вашу веб локацију или апликацију Реацт.јс може побољшати корисничко искуство. Са бесконачним померањем, корисници не морају да кликну да би видели више садржаја. Коришћење Инфините Сцролл у вашој апликацији Реацт.јс може смањити број учитавања странице, што додатно побољшава перформансе.
Такође можете лако бесплатно да примените своју Реацт апликацију на Гитхуб странице.