Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.

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

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

Есть несколько способов реализовать бесконечную прокрутку в React.js. Один из способов — использовать библиотеку вроде react-infinite-scroll-component. Эта библиотека предоставляет компонент, который запускает событие, когда пользователь прокручивает страницу до конца. Затем вы можете использовать это событие для загрузки большего количества контента.

Другой способ реализовать бесконечную прокрутку — использовать встроенные функции, которые предоставляет React. Одной из таких функций является «componentDidMount», которую React вызывает при первом монтировании компонента.

instagram viewer

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

Чтобы использовать react-infinite-scroll-component, вам нужно сначала установить его с помощью npm:

нпм установить реагировать-бесконечно-прокрутить-компонент --сохранять

Затем вы можете импортировать его в свой компонент React.

Импортировать Реагировать от «реагировать»
Импортировать Бесконечная прокрутка от «реагировать на бесконечный компонент прокрутки»
сортПриложениерасширяетРеагировать.Компонент{
конструктор() {
супер()
этот.состояние = {
предметы: [],
 имеет больше: истинный
 }
 }


компонентDidMount () {
этот.fetchData(1)
 }


fetchData = (страница) => {
константа новыеЭлементы = []


для (позволять я = 0; я < 100; я++) {
новые предметы.толкать(я )
 }


если (стр. 100) {
этот.setState({ имеет больше: ЛОЖЬ })
 }


этот.setState({ предметы: [...this.state.items, ...newItems] })
 }


оказывать() {
возвращаться (
<див>
<h1>Бесконечная прокрутка</h1>
<Бесконечная прокрутка
 длина данных = {этот.state.items.length}
 следующий={этот.fetchData}
 hasMore={этот.state.hasMore}
 загрузчик = {<h4>Загрузка...</h4>}
 endMessage={
<p стиль = {{ textAlign: 'центр' }}>
<б>Ура! Вы все это видели</ б>
</п>
 }
>
 {этот.state.items.map((элемент, индекс) => (
<ключ div={индекс}>
 {элемент}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
экспортпо умолчанию Приложение

Этот код начинается с импорта React и компонента InfiniteScroll из библиотеки react-infinite-scroll-component. Затем он создает компонент с состоянием и инициализирует состояние пустым предметы массив и имеет больше флаг установлен в значение true.

В методе жизненного цикла componentDidMount вы вызываете метод выборка данных метод с страница параметр 1. Метод fetchData выполняет вызов API для получения некоторых данных. Этот пример просто генерирует некоторые фиктивные данные. Затем он создает массив из 100 элементов.

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

Метод рендеринга использует компонент InfiniteScroll и передает некоторые реквизиты. Свойство dataLength установлено на длину массива элементов. Следующей опорой является метод fetchData. Свойство hasMore установлено на флаг hasMore. Свойство загрузчика заставляет компонент отображать свое содержимое в качестве индикатора загрузки. Точно так же он отобразит свойство endMessage как сообщение, когда все данные будут загружены.

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

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

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

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

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

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

Импортировать Реагировать, {useState, useEffect} от «реагировать»
функцияПриложение() {
константа [предметы, setItems] = useState([])
константа [hasMore, setHasMore] = useState(истинный)
константа [страница, setPage] = useState(1)


использовать эффект (() => {
 выборка данных (страница)
 }, [страница])


константа fetchData = (страница) => {
константа новыеЭлементы = []


для (позволять я = 0; я < 100; я++) {
новые предметы.толкать(я)
 }


если (стр. 100) {
 setHasMore(ЛОЖЬ)
 }


setItems([...предметы, ...новыепредметы])
 }


константа onScroll = () => {
константа прокрутка вверху = документ.documentElement.scrollTop
константа высота прокрутки = документ.documentElement.scrollHeight
константа высота клиента = документ.documentElement.clientHeight


если (scrollTop + clientHeight >= высота прокрутки) {
 setPage (страница + 1)
 }
 }


использовать эффект (() => {
 window.addEventListener('прокрутить', при прокрутке)
 возврат () => window.removeEventListener('прокрутить', при прокрутке)
 }, [предметы])


возвращаться (
<див>
 {items.map((элемент, индекс) => (
<ключ div={индекс}>
 {элемент}
</div>
 ))}
</div>
 )
}
экспортпо умолчанию Приложение

Этот код использует обработчики useState и useEffect для управления состоянием и побочными эффектами.

В хуке useEffect он вызывает метод fetchData с текущей страницей. Метод fetchData выполняет вызов API для получения некоторых данных. В этом примере вы просто создаете некоторые фиктивные данные для демонстрации метода.

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

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

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

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

Важно взвесить все за и против техники бесконечной прокрутки прежде чем реализовать его на своем веб-сайте или в приложении.

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

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