Как разделять бизнес-логику и UI-компоненты?

Разделение бизнес-логики и UI-компонентов — это ключевой принцип проектирования, который повышает качество кода. Бизнес-логика содержит правила, вычисления и операции с данными, специфичные для предметной области приложения. UI-компоненты отвечают за отрисовку интерфейса и обработку пользовательского ввода. Смешивание этих слоёв приводит к "жирным" компонентам, которые сложно тестировать и поддерживать.

Основные подходы к разделению

• Container/Presenter Pattern: Контейнерные компоненты ("умные") управляют данными и логикой, а презентационные ("глупые") только отображают их.
• Custom Hooks (React): Логика выносится в переиспользуемые хуки, которые компоненты используют для получения состояния и функций.
• Сервисы/Store (например, Redux): Состояние и бизнес-логика централизованно хранятся и управляются вне компонентов.
• MVVM/MVP: Архитектурные паттерны, где ViewModel/Presenter выступает посредником между View и Model.

Практический пример на React с хуками

Вместо того чтобы помещать логику подсчёта и состояние прямо в компонент, мы выносим её в кастомный хук.

// useCounter.js — бизнес-логика
import { useState, useCallback } from 'react';

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  const decrement = useCallback(() => {
    setCount(prev => prev - 1);
  }, []);

  const reset = useCallback(() => {
    setCount(initialValue);
  }, [initialValue]);

  // Возвращаем состояние и API для его изменения
  return { count, increment, decrement, reset };
}

// Counter.js — "глупый" UI-компонент
import React from 'react';
import { useCounter } from './useCounter';

function Counter() {
  const { count, increment, decrement, reset } = useCounter();

  return (
    
      Count: {count}
      +
      -
      Reset
    
  );
}

export default Counter;

В этом примере хук useCounter инкапсулирует всю логику работы со счётчиком. Его можно протестировать отдельно от React. Компонент Counter становится простым и предсказуемым: он только отображает данные и вызывает переданные функции.

Где применяется

Такой подход критически важен в крупных приложениях, где логика сложна и часто меняется. Он применяется во всех современных фреймворках (React, Vue, Angular) и является основой таких паттернов, как Flux/Redux. Разделение позволяет командам работать параллельно: одни разрабатывают сервисы и хуки, другие — интерфейсы.

Вывод: Разделяйте бизнес-логику и UI, чтобы создавать гибкие, тестируемые и поддерживаемые приложения. Это особенно полезно при частых изменениях требований или при необходимости использовать одну логику в разных частях интерфейса (например, на вебе и в мобильном приложении).