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

Принципы достижения максимальной переиспользованности компонентов

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

1. Принцип единственной ответственности (Single Responsibility Principle)

Компонент должен решать одну конкретную задачу, а не пытаться быть "универсальным решением". Это упрощает тестирование, понимание и повторное использование.

// ❌ Плохо: компонент делает слишком много
function UserCard({ user, onEdit, onDelete, showActions }) {
  return (
    <div className="card">
      <img src={user.avatar} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      {showActions && (
        <div>
          <button onClick={onEdit}>Edit</button>
          <button onClick={onDelete}>Delete</button>
        </div>
      )}
    </div>
  );
}

// ✅ Хорошо: разделение ответственности
function UserAvatar({ src, alt }) {
  return <img src={src} alt={alt} className="avatar" />;
}

function UserInfo({ name, email }) {
  return (
    <div className="user-info">
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

function UserActions({ onEdit, onDelete }) {
  return (
    <div className="user-actions">
      <button onClick={onEdit}>Edit</button>
      <button onClick={onDelete}>Delete</button>
    </div>
  );
}

2. Контролируемые и неконтролируемые компоненты

Предоставляйте оба варианта, когда это уместно. Контролируемые компоненты получают значения через props и уведомляют об изменениях через callbacks, тогда как неконтролируемые управляют своим состоянием internally.

// Гибкий компонент с поддержкой обоих подходов
function SmartInput({
  value: controlledValue,
  defaultValue,
  onChange,
  ...props
}) {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;

  const handleChange = (e) => {
    if (!isControlled) {
      setInternalValue(e.target.value);
    }
    onChange?.(e);
  };

  return <input value={value} onChange={handleChange} {...props} />;
}

3. Композиция вместо наследования

Используйте композицию компонентов вместо создания глубоких иерархий наследования. React и современные фреймворки построены на этой парадигме.

// Композиция через children
function Card({ children, padding = 'medium' }) {
  const paddingMap = {
    small: 'p-2',
    medium: 'p-4',
    large: 'p-6'
  };

  return (
    <div className={`card ${paddingMap[padding]}`}>
      {children}
    </div>
  );
}

// Использование
function UserProfile() {
  return (
    <Card padding="large">
      <UserAvatar src={user.avatar} />
      <UserInfo name={user.name} />
      <UserActions onEdit={handleEdit} />
    </Card>
  );
}

4. Пропсы с умолчанием и валидацией

Всегда задавайте разумные значения по умолчанию и используйте PropTypes или TypeScript для документирования ожидаемых свойств.

// TypeScript пример с default значениями
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
  isLoading?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

function Button({
  variant = 'primary',
  size = 'medium',
  isLoading = false,
  onClick,
  children
}: ButtonProps) {
  // Реализация компонента
}

5. Абстракция через Hooks и Render Props

Выносите переиспользуемую логику в кастомные хуки, а для максимальной гибкости используйте render props или компоненты как функции (Function as Child Component).

// Кастомный хук для переиспользуемой логики
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Render props для максимальной гибкости
function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return children({ data, loading, error });
}

6. Контекст и Dependency Injection

Используйте Context API для предоставления зависимостей без пропс-дриллинга, но сохраняйте компоненты независимыми от конкретной реализации.

// Создание контекста для темизации
const ThemeContext = React.createContext('light');

function ThemeProvider({ children, theme }) {
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

// Компонент использует контекст, но не зависит от него напрямую
function ThemedButton({ variant, ...props }) {
  const theme = useContext(ThemeContext);
  const className = `btn btn-${variant} theme-${theme}`;
  
  return <button className={className} {...props} />;
}

7. Атомарный дизайн и система дизайн-токенов

Стройте компоненты по принципам атомарного дизайна (атомы → молекулы → организмы) и используйте дизайн-токены для согласованности.

/* Дизайн-токены в CSS переменных */
:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --spacing-unit: 8px;
  --border-radius: 4px;
  --font-family: 'Inter', sans-serif;
}

.component {
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
  font-family: var(--font-family);
}

Критерии хорошо переиспользуемого компонента:

• Предсказуемость: одинаковые пропсы дают одинаковый результат
• Изолированность: минимальная зависимость от внешнего состояния
• Тестируемость: простота в написании unit-тестов
• Документированность: понятный API и примеры использования
• Адаптивность: поддержка различных сценариев использования
• Производительность: оптимизированные рендеры (memo, useCallback)
• Доступность: встроенная поддержка a11y (ARIA-атрибуты, keyboard navigation)

Ключевой инсайт: переиспользуемость достигается не созданием "универсальных" компонентов, а построением хорошо спроектированной системы примитивов, которые можно комбинировать. Иногда лучше создать несколько специализированных компонентов, чем один перегруженный "швейцарский нож". Сложность должна быть инкапсулирована внутри, предоставляя простой и понятный API наружу.