Как разработчики React, мы все сталкивались со сценариями, в которых нам нужно отображать списки данных. Хотя метод .map() работает хорошо, повторение одной и той же логики каждый раз при рендеринге списка может оказаться утомительным и привести к дублированию кода. К счастью, есть более чистый и масштабируемый способ справиться с этой задачей: использовать повторно используемый компонент, компонент более высокого порядка или собственный хук.

В этой статье я поделюсь подходом к улучшению рендеринга списков в React, гарантируя, что ваш код останется СУХИМ, пригодным для повторного использования и простым в обслуживании.

Основная проблема: повторяющаяся логика .map()

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

const orders = [...]; // Array of order data

return (
  
    {orders.map((order, index) => (
      
    ))}
  >
);

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

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

Чтобы избежать дублирования логики .map(), мы можем создать многократно используемый ListComponent, который абстрагирует логику сопоставления и позволяет нам отображать различные компоненты на основе данных.

function ListComponent({ data, renderItem }) {
  return (
    
      {data.map((item, index) => renderItem(item, index))}
    >
  );
}

Использование:

 (
    
  )} 
/>

В этом шаблоне:
renderItem: функция, определяющая, как должен отображаться каждый элемент

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

Большая гибкость: компонент высшего порядка (HOC)

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

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) => (
          
        ))}
      >
    );
  };
}

Использование:

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array

Обернув OrderComponent в HOC withListRendering, мы автоматически добавили поведение рендеринга списка, не изменяя исходный компонент. Этот шаблон сохраняет модульность кода.

Для любителей хуков: собственный хук для рендеринга списков

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

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

Использование:

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    
  ));

  return {orderList}>;
}

Этот подход перемещает логику .map() в хук, сохраняя логику рендеринга отдельно от структуры компонента. Это еще один способ сохранить компактность компонентов и сосредоточиться на представлении.

Реальный сценарий: панель электронной коммерции

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

Используя подход ListComponent, вы можете отобразить список заказов следующим образом:

 (
    
  )} 
/>

Когда нам нужно отобразить другой список, например продуктов, тот же ListComponent можно повторно использовать с другой функцией renderItem:

 (
    
  )} 
/>

Не нужно переписывать логику .map() — просто повторно используйте ListComponent с разными данными и компонентами. Это делает кодовую базу более удобной для сопровождения по мере ее роста.

Вывод: чистый, многоразовый и масштабируемый код

Шаблон многократного использования ListComponent упрощает рендеринг списка React, абстрагируя повторяющуюся логику .map(). Независимо от того, предпочитаете ли вы использовать базовый компонентный подход, HOC или собственный хук, этот шаблон гарантирует чистоту и возможность повторного использования кода.

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

Какие еще шаблоны многократного использования вы нашли полезными в React? Дайте мне знать в комментариях! и, наконец, спасибо за прочтение