Введение

Мы видим бесконечную прокрутку в приложениях и на веб-страницах, особенно в социальных сетях, которые хотят, чтобы мы просто прокручивали. Хотя бездумная прокрутка — это нехорошо, создание собственной бесконечной прокрутки — это здорово. Как разработчик, мы должны попытаться воссоздать компоненты, которые мы видим во время просмотра веб-страниц. Это может побудить вас узнать больше и мыслить нестандартно при реализации некоторых компонентов.

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

В этой статье мы собираемся создать компонент бесконечной прокрутки с нуля. Он будет охватывать следующие темы:

• Настройка среды
• Создание компонента
• Добавление CSS
• Оптимизация бесконечной прокрутки

Теперь давайте начнем.

Настройка среды

Мы собираемся использовать CRA для создания базового приложения React. Вы можете сделать это, выполнив следующую команду:

    npx create-react-app infinite-scroll

Если вы хотите использовать Vite или NextJS, вы тоже можете это сделать. За исключением незначительных изменений, остальное останется прежним.

Примечание. Для запуска этой команды у вас должен быть предварительно установлен NodeJS. Также удалите часть ненужного шаблонного кода из CRA.

Нам понадобится одна зависимость для получения данных из API. После настройки React мы можем установить Axios с помощью следующей команды:

    npm install axios

Теперь мы готовы создать компонент.

Компонент приложения

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

Вот код компонента приложения:

App.js

    import "./App.css";
    import { useState, useEffect } from "react";
    import axios from "axios";
    import { MovieCard } from "./MovieCard";

    function App() {
      const [page, setPage] = useState(1); // for number of page in tmdb 
      const [data, setData] = useState([]); // storing the fetched data
      const [loading, setLoading] = useState(false); // for setting loading state

      // fetching and stroring the data in the state
      const fetchMovie = async () => {
        const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
        const data = await axios.get(URL, {
          headers: {
            Authorization:
              "Bearer API KEY",
            Accept: "application/json",
          },
        });
        setData((prevData) => [...prevData, ...data.data.results]); // we are going to add the new data to current data.
        setLoading(false);
      };

      // useEffecte for invoking the function at the start
      useEffect(() => {
        fetchMovie();
      }, [page]);

      return (
        

          

            Popular movies according to Tmdb
            

              {data.length > 1 &&
                data.map((item) => {
                  return (
                    
                  );
                })}
              {loading && 
Loading....
}
            
          
      );
    }

    export default App;

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

Создайте компонент MovieCard.js для отображения информации о каждом фильме.

MoveCard.js

    import React from "react";

    export const MovieCard = ({ title, description, imageURL, rating }) => {

      const imagePath = `https://image.tmdb.org/t/p/w500${imageURL}`; // poster image path URL 

      return (
        

          

            
{title}
            
{description}
            
{rating.toFixed(1)}⭐
          
        
      );
    };

Вот CSS приложения:

App.css

    .App {
      text-align: center;
    }

    .App-header {
      background-color: #282c34;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 1em;
      font-size: calc(10px   2vmin);
      color: white;
    }

    .movieCardContainer{
      margin-top: 1em;
      display: flex;
      flex-direction: column;
      gap: 1em;
      width: 60%;
      max-width: 800px;
    }

    .movieCard{
      display: flex;
    }

    .movieInfo{
      margin-left: 1em;
      text-align: left;
    }

    p{
      font-size: 18px;
    }

Бесконечная прокрутка

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

У нас будет еще один useEffect, который будет увеличивать состояние страницы на 1. Как только номер страницы будет обновлен, сработает первоначальный useEffect, который имеет эту страницу в качестве зависимости. Это вызовет функцию fetchMovie() для получения данных.

Добавление EventListner для прокрутки

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

    window.addEventListener("scroll", handleScroll);

ручкаПрокрутка

Когда происходит прокрутка, мы собираемся проверить, находится ли текущая позиция полосы прокрутки чуть выше нижней части веб-страницы (т.е. всей области вертикальной прокрутки). Если да, то мы меняем состояние загрузки на true.

    const handleScroll = () => {
      if (document.body.scrollHeight - 300 

• scrollHeight: это свойство, которое возвращает общую высоту содержимого, включая ту часть, которая не видна на экране. Итак, это будет общая прокручиваемая область.
• scrollY: это свойство, которое возвращает количество пикселей, на которые документ был прокручен по вертикали сверху. Таким образом, это будет область, которая была прокручена.
• innerHeight: это свойство, возвращающее высоту области содержимого Windows браузера. Это будет ширина полосы прокрутки. Он добавлен в ScrollY, чтобы выборка происходила тогда, когда мы достигли содержимого, а не когда мы его передали. ## useEffect

После успешного изменения состояния загрузки мы можем реализовать useEffect для увеличения номера страницы. Таким образом, можно получить данные фильма.

    useEffect(() => {
      if (loading == true) {
        setPage((prevPage) => prevPage   1);
      }
    }, [loading]);

    // other useEffect that we already implemented

    useEffect(() => {
      fetchMovie();
    }, [page]);

Оптимизация eventListner

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

    // debounce function
    function debounce(func, delay) {
      let timeoutId;
      return function (...args) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    }

    // adding debounce to the eventListner
    window.addEventListener("scroll", debounce(handleScroll, 500));

Вот полный код App.js:

    import "./App.css";
    import { useState, useEffect } from "react";
    import axios from "axios";
    import { MovieCard } from "./MovieCard";

    function App() {
      const [page, setPage] = useState(1);
      const [data, setData] = useState([]);
      const [loading, setLoading] = useState(false);
      const fetchMovie = async () => {

        const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
        const data = await axios.get(URL, {
          headers: {
            Authorization:
              "Bearer API KEY",
            Accept: "application/json",
          },
        });
        setData((prevData) => [...prevData, ...data.data.results]);
        setLoading(false);
      };
      useEffect(() => {
        fetchMovie();
      }, [page]);

      const handleScroll = () => {
        if (
          document.body.scrollHeight - 300  {
            func(...args);
          }, delay);
        };
      }

      window.addEventListener("scroll", debounce(handleScroll, 500));

      useEffect(() => {
        if (loading == true) {
          setPage((prevPage) => prevPage   1);
        }
      }, [loading]);

      return (
        

          

            Popular movies according to Tmdb
            

              {data.length > 1 &&
                data.map((item) => {
                  return (
                    
                  );
                })}
              {loading && 
Loading....
}
            
          
      );
    }

    export default App;

Вот GIF-изображение, демонстрирующее работу приложения.

Заключение

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

Независимо от того, отображаете ли вы данные фильмов, сообщения в блогах или любой другой контент, этот компонент служит прочной основой. Помните, что главное — обеспечить удобство работы пользователя, тщательно управляя тем, когда и как данные извлекаются при прокрутке пользователем. Приятного кодирования!