Вы когда-нибудь сталкивались с веб-сайтом или приложением, которое загружает и отображает больше контента при прокрутке? Это то, что мы называем бесконечной прокруткой.
Бесконечная прокрутка — популярный метод, который упрощает просмотр больших объемов контента. Это также может сделать работу пользователя более плавной, особенно на мобильных устройствах.
Вы можете реализовать бесконечную прокрутку в React несколькими разными способами. Первый — использовать такую библиотеку, как Reaction-Infinite-Scroll-Component. Компонент этой библиотеки запускает событие всякий раз, когда пользователь прокручивает страницу вниз. Затем вы можете использовать это событие как сигнал для загрузки большего контента.
Другой способ реализовать бесконечную прокрутку в React — использовать встроенные функции. Одной из таких функций является «comComponentDidMount», которую React вызывает при первом монтировании компонента.
Вы можете использовать эту функцию для загрузки первого пакета данных, а затем функцию «comComponentDidUpdate» для загрузки последующих данных при прокрутке пользователем вниз.
Вы также можете использовать хуки React, чтобы добавить функцию бесконечной прокрутки.
Есть несколько способов использования компонента реакции-бесконечной прокрутки.
Оглавление
Установите компонент реакции-бесконечной прокрутки
Чтобы начать использование, сначала необходимо установить его через npm:
npm install react-infinite-scroll-component --save
Импортируйте компонент реакции-бесконечной прокрутки в 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.
Установить параметры
В методе жизненного цикла компонентаDidMount необходимо вызвать метод fetchData с параметром страницы, равным 1. Метод fetchData выполняет вызов API для получения данных. Этот пример реакции с бесконечной прокруткой генерирует некоторые фиктивные данные и создает массив из 100 элементов.
Как только параметр страницы достигнет значения 100, поскольку элементов больше не существует, вы можете установить для флага hasMore значение False. Это остановит компонент InfiniteScroll от дальнейших вызовов API. Наконец, установите состояние, используя новые данные.
Метод рендеринга использует компонент InfiniteScroll и передает некоторые реквизиты. Для свойства dataLength установлена длина массива элементов. Следующий реквизит установлен для метода fetchData. Свойство hasMore установлено равным флагу hasMore.
Свойство loader заставляет компонент отображать свое содержимое как индикатор загрузки. Аналогично, он отобразит свойство endMessage как сообщение, когда все данные завершат загрузку.
Вы можете передать компоненту InfiniteScroll и другие реквизиты, но именно эти вы будете использовать чаще всего.
Использование встроенных функций
React также имеет несколько встроенных методов, которые можно использовать для реализации InfiniteScroll.
Первый метод — компонентДидУпдате. 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 может улучшить взаимодействие с пользователем. Благодаря бесконечной прокрутке пользователям не нужно нажимать, чтобы увидеть больше контента. Использование бесконечной прокрутки в вашем приложении React.js может уменьшить количество загрузок страниц, что еще больше повысит производительность.
Вы также можете легко и бесплатно развернуть свое приложение React на страницах Github.