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

1. Традиционное управление состоянием.
   Простой способ реализовать функцию «Загрузить больше» — использовать локальное управление состоянием React. Вот упрощенный пример:

import React, { useState } from 'react';
const MyComponent = () => {
  const [items, setItems] = useState([]);
  const [visibleItems, setVisibleItems] = useState(5);
  const loadMore = () => {
    setVisibleItems(prevVisibleItems => prevVisibleItems + 5);
  };
  return (
    <div>
      {items.slice(0, visibleItems).map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <button onClick={loadMore}>Load More</button>
    </div>
  );
};
export default MyComponent;

2. Бесконечная прокрутка.
   Еще один модный способ управления нумерацией страниц — реализация бесконечной прокрутки, при которой новый контент извлекается автоматически, когда пользователь прокручивает страницу вниз. Вот упрощенный пример использования React useEffect и специального прослушивателя событий прокрутки:

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const fetchItems = async () => {
    // Fetch items from the server based on the current page
    const response = await fetch(`/api/items?page=${page}`);
    const newItems = await response.json();
    setItems(prevItems => [...prevItems, ...newItems]);
  };
  const handleScroll = () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight) {
      setPage(prevPage => prevPage + 1);
    }
  };
  useEffect(() => {
    fetchItems();
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [page]);
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};
export default MyComponent;

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

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const fetchItems = async () => {
    const response = await fetch(`/api/items?page=${page}`);
    const { data } = await response.json();
    setItems(data);
  };
  useEffect(() => {
    fetchItems();
  }, [page]);
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <button onClick={() => setPage(prevPage => prevPage + 1)}>
        Load More
      </button>
    </div>
  );
};
export default MyComponent;

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