Объяснение паттерна компонентов-презентеров и контейнеров в React

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

Что такое компоненты-презентеры

Компоненты-презентеры (или «чистые компоненты») отвечают исключительно за отображение данных. Они принимают данные через props и выводят их в разметке. Такие компоненты не содержат логики, связанной с состоянием (state) или с взаимодействием с API - их задача только отображать UI.

Пример компонента-презентера

import React from 'react';

const UserProfile = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Возраст: {age}</p>
    </div>
  );
};

export default UserProfile;

В этом примере UserProfile является компонентом-презентером. Он получает name и age через props и отображает их.

Что такое контейнерные компоненты

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

Пример контейнерного компонента

import React, { useEffect, useState } from 'react';
import UserProfile from './UserProfile';

const UserProfileContainer = () => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/user')
      .then(response => response.json())
      .then(data => setUserData(data));
  }, []);

  if (!userData) {
    return <div>Загрузка...</div>;
  }

  return (
    <UserProfile name={userData.name} age={userData.age} />
  );
};

export default UserProfileContainer;

В этом примере UserProfileContainer является контейнером, который загружает данные пользователя через API и передает их в компонент-презентер UserProfile.

Преимущества использования паттерна

Заключение

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