Как добавить бесконечную прокрутку в React.js
Программирование

Как добавить бесконечную прокрутку в React.js

Воспользуйтесь преимуществами этой фронтенд-техники для плавной и непрерывной доставки контента

Вы когда-нибудь сталкивались с веб-сайтом или приложением, которое загружает и отображает все больше контента по мере прокрутки? Это то, что мы называем бесконечной прокруткой

Бесконечная прокрутка – это популярная техника, которая уменьшает количество загрузок страницы. Это также может обеспечить более плавное взаимодействие с пользователем, особенно на мобильных устройствах

Методы реализации бесконечной прокрутки в React.js

Существует несколько различных способов реализации бесконечной прокрутки в React.js. Один из способов – использовать библиотеку 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

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 для получения некоторых данных. В данном примере просто генерируются фиктивные данные. Затем создается массив из 100 элементов

Если параметр page равен 100, то элементов больше нет, поэтому установите флаг hasMore в false. Это остановит компонент InfiniteScroll от дальнейших вызовов API. Наконец, установите состояние, используя новые данные

Метод render использует компонент InfiniteScroll и передает некоторые реквизиты. Реквизит dataLength устанавливается на длину массива элементов. Реквизит next устанавливается в значение метода fetchData. Реквизит hasMore устанавливается на флаг hasMore. Реквизит loader заставляет компонент отображать свое содержимое в качестве индикатора загрузки. Аналогично, он отобразит реквизит endMessage в виде сообщения, когда все данные закончат загрузку

Существуют и другие реквизиты, которые вы можете передать компоненту InfiniteScroll, но эти реквизиты вы будете использовать чаще всего

Использование встроенных функций

React также имеет некоторые встроенные методы, которые можно использовать для реализации бесконечной прокрутки

Первый метод – componentDidUpdate.React вызывает этот метод после обновления компонента. Вы можете использовать этот метод, чтобы проверить, прокрутил ли пользователь страницу до самого низа, и, если да, загрузить больше данных

Второй метод – scroll, который 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. Это остановит компонент InfiniteScroll от дальнейших вызовов API. Наконец, установите состояние с новыми данными

Метод onScroll отслеживает положение прокрутки. Если пользователь прокрутил страницу до самого низа, вы можете загрузить больше данных

Хук useEffect добавляет слушателя события прокрутки. Когда событие прокрутки срабатывает, он вызывает метод onScroll

Плюсы и минусы бесконечной прокрутки

В использовании бесконечной прокрутки есть свои плюсы и минусы. Она может помочь улучшить пользовательский интерфейс, делая его более плавным, особенно на мобильных устройствах. Однако это также может привести к тому, что пользователи могут пропустить контент, поскольку они могут прокрутить страницу недостаточно далеко, чтобы увидеть ее

Важно взвесить все плюсы и минусы техники бесконечной прокрутки, прежде чем внедрять ее на своем сайте или в приложении

Улучшение пользовательского опыта с помощью бесконечной прокрутки

Добавление бесконечной прокрутки на ваш сайт или приложение React.js поможет улучшить пользовательский опыт. С бесконечной прокруткой пользователям не нужно нажимать на кнопку мыши, чтобы увидеть больше контента. Использование Infinite Scroll в вашем приложении React.js также может помочь уменьшить количество загрузок страницы, что может улучшить производительность

Вы также можете легко и бесплатно развернуть свое приложение React на страницах Github

Об авторе

Алексей Белоусов

Привет, меня зовут Филипп. Я фрилансер энтузиаст . В свободное время занимаюсь переводом статей и пишу о потребительских технологиях для широкого круга изданий , не переставая питать большую страсть ко всему мобильному =)

Комментировать

Оставить комментарий