Ви коли-небудь зустрічали веб-сайт або програму, яка завантажує та відображає більше вмісту під час прокручування? Це те, що ми називаємо нескінченним прокручуванням.
Нескінченна прокрутка — це популярна техніка, яка полегшує перегляд великих обсягів вмісту. Це також може полегшити роботу користувача, особливо на мобільних пристроях.
Ви можете реалізувати нескінченне прокручування в React кількома різними способами. Перший — використовувати бібліотеку на зразок react-infinite-scroll-component. Компонент цієї бібліотеки запускає подію кожного разу, коли користувач прокручує сторінку донизу. Потім ви можете використовувати цю подію як підказку для завантаження додаткового вмісту.
Ще один спосіб реалізувати нескінченне прокручування в React — за допомогою його вбудованих функцій. Однією з таких функцій є «componentDidMount», яку React викликає, коли вперше монтує компонент.
Ви можете використовувати цю функцію для завантаження першого пакету даних, а потім функцію «componentDidUpdate» для завантаження наступних даних, коли користувач прокручує сторінку вниз.
Ви також можете використовувати хуки React, щоб додати функцію нескінченного прокручування.
Є кілька способів використання компонента react-infinite-scroll.
Встановіть компонент react-infinite-scroll
Щоб розпочати використання, спочатку потрібно встановити його через 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. Нарешті, установіть стан, використовуючи нові дані.
Метод render використовує компонент InfiniteScroll і передає деякі властивості. Опис dataLength встановлюється на довжину масиву елементів. Для наступного атрибута встановлено метод fetchData. Опис hasMore встановлюється рівним прапору hasMore.
Проп завантажувача змушує компонент відображати свій вміст як індикатор завантаження. Подібним чином він відобразить властивість endMessage як повідомлення, коли всі дані завершать завантаження.
Ви можете передати інші властивості компоненту 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.