Паттерн Container-Presentational в React

Паттерн «Контейнер-Представление» (или Container-Presentational) — это популярный подход к организации компонентов в React приложении, который способствует повышению переиспользования кода, улучшает читаемость и обеспечивает четкое разделение логики и отображения.

1. Контейнеры (Container Components):

• Контейнеры отвечают за управление состоянием и бизнес-логикой приложения.

• Они часто связаны с хранилищем данных (например, Redux или Context API) и обрабатывают логику взаимодействия с сервером.

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

Пример контейнера:

import React, { useState, useEffect } from 'react';
import { fetchData } from './api'; // Пример функции для получения данных

const ContainerComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchDataAsync = async () => {
      const result = await fetchData();
      setData(result);
    };

    fetchDataAsync();
  }, []);

  return <PresentationalComponent data={data} />;
};

export default ContainerComponent;

2. Представления (Presentational Components):

• Представления отвечают за отображение данных и пользовательский интерфейс.

• Они не содержат логики и получают все необходимые данные и функции от контейнеров в виде пропсов.

• Представления часто являются повторно используемыми и могут быть использованы в разных местах приложения.

Пример представления:

import React from 'react';

const PresentationalComponent = ({ data }) => {
  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default PresentationalComponent;

Преимущества:

• Четкое разделение ответственностей между контейнерами и представлениями.

• Улучшает читаемость и поддерживаемость кода.

• Повышает переиспользование компонентов.

Рекомендации:

• При проектировании приложения разделите компоненты на контейнеры и представления с учетом их ответственностей.

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