Function components
Тема дорожной карты · React
Функциональные компоненты — это основной способ определения UI в React: они представляют собой обычные JavaScript-функции, принимающие объект props и возвращающие JSX с описанием того, что должно отображаться на экране. С введением хуков React в версии 16.8 функциональные компоненты получили возможность управлять локальным состоянием через useState, выполнять побочные эффекты через useEffect и потреблять контекст через useContext, став полностью эквивалентными — и теперь предпочтительными — по сравнению с компонентами на основе классов. Функциональные компоненты React проще читать, легче тестировать и порождают меньше шаблонного кода, чем их аналоги на классах, именно поэтому вся экосистема React перешла на них как на стандартный формат написания кода. TypeScript-разработчики типизируют функциональные компоненты, аннотируя параметр props или используя React.FC<Props>, обеспечивая полную типобезопасность по всему дереву компонентов. Написание чистых, компонуемых функциональных компонентов с хорошо определёнными пропсами и минимальными побочными эффектами — это основа поддерживаемой React-разработки.
Как это работает
Function components моделирует React-UI как дерево маленьких переиспользуемых единиц. Компонент — это функция, принимающая props (один объект-аргумент) и возвращающая JSX. Поток данных «родитель → ребёнок» односторонний: родители передают значения вниз через props; дети вызывают переданные через props коллбэки, чтобы сообщить наверх. props.children — специальный prop, хранящий JSX, вложенный между открывающим и закрывающим тегами. PropTypes (runtime) или TypeScript (compile-time) документируют и проверяют форму props.
Когда применять
Выносите компонент когда (а) один и тот же JSX повторяется, (б) у области UI есть ясное имя (Header, ProductCard, CommentList), (в) часть UI имеет независимый state. Не выносите слишком жадно — один 60-строчный компонент с формой часто яснее, чем 8 микрокомпонентов по разным файлам. Используйте children для "slot"-композиции; именованные props — для конкретных ролей (header={<X/>} vs <X>...</X>).
Типичные ошибки
Ловушки Function components: мутация props внутри ребёнка (props read-only — мутация это тихий баг); проброс огромных объектов через 5+ уровней детей (prop drilling — используйте Context или композицию); создание новых объектов/функций-литералов в render как props (<C onClick={() => ...}/> рендерит ребёнка каждый рендер родителя — мемоизируйте или вынесите); приём style={{...}} как prop замораживает гибкость дизайн-системы. Интерфейсы props — маленькие и именованные.