Как да добавите безкрайно превъртане в React.js
Попадали ли сте някога на уебсайт или приложение, което зарежда и показва повече съдържание, докато превъртате? Това е, което наричаме безкрайно превъртане.
Безкрайното превъртане е популярна техника, която може да улесни разглеждането на големи количества съдържание. Освен това може да осигури по-плавно потребителско изживяване, особено на мобилни устройства.
Можете да приложите безкрайно превъртане в React по няколко различни начина. Първият е да използвате библиотека като react-infinite-scroll-component. Компонентът на тази библиотека задейства събитие всеки път, когато потребителят превърти до края на страницата. След това можете да използвате това събитие като сигнал за зареждане на повече съдържание.
Друг начин за внедряване на безкрайно превъртане в React е чрез неговите вградени функции. Една такава функция е „componentDidMount“, която React извиква, когато за първи път монтира компонент.
Можете да използвате тази функция, за да заредите първата партида от данни, последвана от функцията „componentDidUpdate“, за да заредите следващите данни, докато потребителят превърта надолу.
Можете също да използвате React hooks, за да добавите функция за безкрайно превъртане.
Има няколко начина за използване на react-infinite-scroll-component.
Съдържание
Инсталирайте react-infinite-scroll-component
За да стартирате използването, първо трябва да го инсталирате чрез npm:
npm install react-infinite-scroll-component --save
Импортирайте react-infinite-scroll-component в React
След инсталирането трябва да импортирате библиотеката за безкрайно превъртане във вашия React компонент.
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
Този код започва с импортиране на React и компонента InfiniteScroll от библиотеката react-infinite-scroll-component. След това създава компонент със състояние и го инициализира с празен масив от елементи и флаг hasMore, зададен на True.
Задайте параметри
В метода на жизнения цикъл на componentDidMount трябва да извикате метода fetchData с параметър на страницата, зададен на 1. Методът fetchData прави извикване на API за извличане на данни. Този пример за react-infinite-scroller генерира някои фиктивни данни и създава масив от 100 елемента.
След като параметърът на страницата достигне 100, тъй като не съществуват повече елементи, можете да зададете флага hasMore на False. Това спира компонента InfiniteScroll да прави по-нататъшни извиквания на API. Накрая задайте състоянието, като използвате новите данни.
Методът за изобразяване използва компонента InfiniteScroll и предава някои подпори. Пропът dataLength е зададен на дължината на масива от елементи. Следната подложка е зададена на метода fetchData. Пропът hasMore е зададен равен на флага hasMore.
Пропът на зареждащия кара компонента да рендира съдържанието си като индикатор за зареждане. По същия начин, той ще рендира endMessage prop като съобщение, когато всички данни приключат със зареждането.
Можете да подадете други подпори към компонента InfiniteScroll, но това са тези, които ще използвате най-често.
Използване на вградени функции
React също има някои вградени методи, които можете да използвате, за да имплементирате InfiniteScroll.
Първият метод е componentDidUpdate. React извиква този метод, след като актуализира компонент. Можете да използвате този метод, за да проверите дали потребителят е превъртял до края на страницата. Ако да, зарежда повече данни.
Вторият метод е превъртане, който React извиква, когато потребителят превърта. Можете да използвате този метод, за да следите позицията на превъртане. Можете да заредите повече данни, ако потребителят е превъртял до края на страницата.
Ето пример за безкрайно превъртане на React, който ви показва как да използвате тези методи:
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
Този код използва куките useState и useEffect за управление на състояние и странични ефекти.
В рамките на куката useEffect тя извиква метода fetchData с текущата страница. Методът fetchData прави API извикване за извличане на данни. В този пример вие просто генерирате някои фиктивни данни, за да демонстрирате техниката.
Цикълът for попълва масива newItems със 100 цели числа. Ако параметърът на страницата е 100, той задава флага hasMore на False. Това спира компонента за безкрайно превъртане да прави по-нататъшни извиквания на API.
Накрая задайте състоянието с новите данни.
Методът onScroll следи позицията на превъртане. Можете да заредите повече данни, ако потребителят превърти до дъното на страницата.
Куката useEffect добавя слушател на събития за събитието за превъртане. Когато събитието за превъртане се задейства, то извиква метода onScroll.
Има предимства и недостатъци при използването на безкрайното превъртане на React. Подобрява потребителския интерфейс, като осигурява по-плавно изживяване, особено на мобилни устройства. Това обаче може също така да доведе до пропускане на съдържание на потребителите, тъй като може да не превъртят надолу достатъчно, за да го видят.
От съществено значение е да претеглите плюсовете и минусите на техниката за безкрайно превъртане, преди да я внедрите на вашия уебсайт или приложение.
Добавянето на безкрайно превъртане към вашия уебсайт или приложение React.js може да подобри потребителското изживяване. С безкрайното превъртане потребителите не трябва да кликват, за да видят повече съдържание. Използването на Infinite Scroll във вашето приложение React.js може да намали броя на зарежданията на страниците, което допълнително подобрява производителността.
Можете също така лесно да внедрите приложението си React в страниците на Github безплатно.
