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

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

Почему возможность повторного использования важна для масштабирования приложений React

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

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

Основные понятия повторно используемых компонентов списка

Чтобы создавать масштабируемые повторно используемые компоненты списка, вам необходимо понимать несколько концепций React:

Props и State: они позволяют вам передавать данные вашим компонентам и управлять внутренним поведением ваших компонентов соответственно.

Методы массивов: такие методы, как .map(), .filter() и .reduce(), необходимы для преобразования массивов в компонентах React.

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

Пользовательский интерфейс, управляемый реквизитами: повторно используемые компоненты списка должны управляться реквизитами. Это позволяет передавать различные данные, логику рендеринга и даже стили из родительских компонентов.

Пример 1: простой повторно используемый компонент списка

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

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    

{items.map((item, index) => (
• {item}
))}

В этом примере SimpleList принимает свойство items, которое представляет собой массив. Мы используем функцию .map() для перебора массива и рендеринга каждого элемента внутри неупорядоченного списка (

). Каждый элемент заключен в элемент
• . Ключевое свойство гарантирует, что React сможет эффективно обновлять DOM при изменении списка.

  Пример использования:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      
  
        
  Fruit List
        
    );
  };
  
  export default App;
  

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

  Расширение возможностей повторного использования компонента списка

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

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

  Пример 2. Использование свойств рендеринга для рендеринга пользовательского списка

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

  const ReusableList = ({ items, renderItem }) => {
    return (
      

  {items.map((item, index) => (
  • {renderItem(item)}
  ))}
  ); };

  В этом случае компонент ReusableList принимает свойство renderItem, которое представляет собой функцию, которая принимает элемент и возвращает JSX. Это обеспечивает гибкий способ управления отображением каждого элемента списка.

  Пример использования:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

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

  Пример 3: расширение компонентов списка с помощью компонентов более высокого порядка

  Еще один мощный шаблон в React — это компонент высшего порядка (HOC). HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными функциями.

  Например, если бы мы хотели расширить наш ReusableList дополнительными функциями, такими как выборка данных или условный рендеринг, мы могли бы использовать HOC.
  

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return 
  Loading...
  ;
      return ;
    };
  };
  

  Здесь withLoading HOC добавляет поведение загрузки к любому компоненту. Давайте применим это к нашему ReusableList:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

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

  Пример 4: Компоненты расширенного списка с крючками

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

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage   1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  Хук usePagination инкапсулирует логику нумерации страниц. Теперь мы можем использовать этот крючок в нашем компоненте списка.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      
  
        
  
          {currentItems.map((item, index) => (
            
  {renderItem(item)}
          ))}
        
  
          
            Previous
          
          
            Next
          
        
      
    );
  };
  

  Пример использования:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i   1}`);
  
    return (
      
  
        
  Paginated List
        
  {item}
  }
        />
      
    );
  };
  

  В этом примере показан постраничный список, в котором пользователи могут перемещаться по страницам элементов. Хук обрабатывает всю логику нумерации страниц,

  чтобы его можно было повторно использовать в разных компонентах.

  Заключение

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

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

  Отзывы

  Официальная документация React
  
  Реквизиты рендеринга React
  
  Реагировать на компоненты высшего порядка
  
  Реагирующие хуки