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

Паттерн 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;

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

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

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

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

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

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

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

Zaka-zaka [CPS] RU + CIS

Полезные ссылки:

zaka-zaka

Покупай игры выгодно

РЕКЛАМА, ООО «ГЕЙБСТОР» ИНН: 7842136365

zaochnik

Срочная помощь в написании всех видов работ

РЕКЛАМА, ООО «ЗАОЧНИК.КОМ.» ИНН: 7710949967

skyeng

Лучшие из курсов английского в Skyeng

РЕКЛАМА, ОАНО ДПО «СКАЕНГ» ИНН: 9709022748