Компоненты и пропсы
Тема дорожной карты · React
В React компоненты и пропсы — это фундаментальные строительные блоки для создания фронтенд-интерфейсов. Компонент — это переиспользуемая, самодостаточная единица UI, написанная как JavaScript-функция, возвращающая JSX, а пропсы (от английского «properties») — это механизм передачи данных от родительского компонента к дочернему. Пропсы доступны только для чтения: компонент не должен изменять полученные пропсы — эта иммутабельность делает поток данных предсказуемым и однонаправленным во всём приложении. Составляя множество небольших, сфокусированных компонентов, взаимодействующих через пропсы, React-разработчики строят сложные UI, сохраняя каждый компонент простым для понимания и тестирования. Освоение компонентов и пропсов — это обязательный первый шаг к эффективному управлению состоянием в React и продвинутым паттернам, таким как higher-order 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>).
Типичные ошибки
Ловушки Компоненты и пропсы: мутация props внутри ребёнка (props read-only — мутация это тихий баг); проброс огромных объектов через 5+ уровней детей (prop drilling — используйте Context или композицию); создание новых объектов/функций-литералов в render как props (<C onClick={() => ...}/> рендерит ребёнка каждый рендер родителя — мемоизируйте или вынесите); приём style={{...}} как prop замораживает гибкость дизайн-системы. Интерфейсы props — маленькие и именованные.