Что такое функциональный UI-компонент? Приведите пример на React.

Функциональный UI-компонент — это компонент, реализованный как чистая функция, которая получает данные через props и возвращает JSX. Он не имеет внутреннего состояния (stateless) и побочных эффектов на этапе рендеринга.

Пример функционального компонента кнопки на React:

// Stateless Functional Component
const Button = ({ onClick, children, disabled = false, type = 'button' }) => {
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={`btn ${disabled ? 'btn--disabled' : 'btn--primary'}`}
    >
      {children}
    </button>
  );
};

// Использование
const App = () => {
  const handleClick = () => console.log('Клик!');
  return (
    <Button onClick={handleClick} disabled={false}>
      Отправить
    </Button>
  );
};

Ключевые характеристики:

1. Декларативность: Описывает что отрисовать, а не как.
2. Предсказуемость: При одинаковых props всегда возвращает одинаковый результат.
3. Простота тестирования: Легко тестировать, передавая различные пропсы.
4. Отсутствие побочных эффектов: Не изменяет внешнее состояние или DOM напрямую в теле функции.

Когда использовать: Для презентационных компонентов, которые только отображают данные и обрабатывают события.