Как реализуется Open-Closed в компонентах?

Принцип открытости/закрытости (OCP) — второй принцип SOLID, который утверждает, что программные сущности (классы, модули, функции) должны быть открыты для расширения, но закрыты для модификации. В мире компонентов, особенно в React, Vue или Angular, это означает, что базовый компонент должен быть спроектирован так, чтобы его поведение можно было расширять без изменения его исходного кода.

Как это работает в компонентах?

Основная идея — предвидеть точки изменений и сделать их конфигурируемыми. Вместо того чтобы добавлять условия (if/else) или новые пропсы для каждого нового случая, компонент должен предоставлять абстракции (например, слоты, render props, HOC) для настройки.

• Композиция: Самый частый подход. Создаётся базовый компонент, который принимает дочерние элементы или функции для рендеринга частей UI. Например, компонент Modal может принимать header, body и footer как children.
• Пропсы и конфигурация: Компонент настраивается через пропсы. Важно, чтобы добавление новой функциональности не требовало изменения существующих проверок внутри компонента, а просто передавалось как новый параметр.
• Render Props / Children as a Function: Позволяют динамически определять, что и как рендерить внутри компонента, делегируя логику отрисовки вызывающему коду.
• Высокоуровневые компоненты (HOC): Обёртки, которые добавляют новое поведение (логику, пропсы) к существующему компоненту, не меняя его исходник.

Пример кода

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

// Базовый компонент Button (закрыт для модификации)
const Button = ({ children, onClick, variant = 'primary', ...props }) => {
  const baseStyle = 'px-4 py-2 rounded font-medium';
  const variants = {
    primary: 'bg-blue-600 text-white',
    secondary: 'bg-gray-300 text-black',
  };
  return (
    
      {children}
    
  );
};

// Расширение через композицию (открыто для расширения)
const IconButton = ({ icon, label, ...buttonProps }) => (
  
    
      {icon}
      {label}
    
  
);

// Использование
const App = () => (
  
     alert('Clicked!')}>Basic Button
    }
      label="With Icon"
      variant="secondary"
      onClick={() => console.log('Icon button clicked')}
    />
  
);

В этом примере Button остаётся простым и стабильным. Чтобы добавить иконку, мы не лезем внутрь Button, а создаём новый компонент IconButton, который композирует исходный Button и добавляет нужную разметку. Это и есть OCP в действии.

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

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

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