PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

В чем разница между функциональным и простым компонентом?

Компоненты

Скорее всего, под «простым» имеется в виду классовый компонент или различие «компонент против обычной функции». Разберём оба толкования.

Функциональный против классового

// функциональный
const Hello = ({ name }) => <h1>Привет, {name}</h1>;

// классовый
class Hello extends React.Component {
  render() { return <h1>Привет, {this.props.name}</h1>; }
}

Отличия: функция без this и наследования, состояние и эффекты — хуки (useState/useEffect) против this.state/методов жизненного цикла; переиспользование логики — кастомные хуки против HOC. Сегодня стандарт — функциональные.

Компонент против обычной функции

Функциональный компонент — это функция, но с контрактом React:

  • Именование с большой буквы — иначе JSX сочтёт её DOM-тегом.
  • Возвращает JSX (React-элементы), принимает один аргумент — props.
  • Может использовать хуки — потому что React вызывает её сам в контролируемом окружении, привязывая state к позиции в дереве.
  • Имеет идентичность в дереве: свой state, жизненный цикл, место в reconciliation.

Обычная функция, возвращающая JSX («render-функция», хелпер), — не компонент:

const renderRow = (item) => <li>{item.name}</li>; // просто функция
{items.map(renderRow)}                              // ок, но без state/хуков

Важный практический нюанс: вызов Component() как функции вместо <Component /> лишает её собственного state и ломает хуки при условном рендеринге — React не видит её как отдельный узел.

Коротко для собеседования

Если «простой» = классовый: функциональный — без this, состояние через хуки, современный стандарт. Если «простой» = обычная функция: компонент — это функция с контрактом (заглавная буква, props → JSX, хуки, собственная идентичность и state в дереве), и использовать её нужно как <Component />, а не прямым вызовом.

Другие вопросы раздела