Передача props
Тема дорожной карты · React
Передача пропсов — это основной механизм React для передачи данных от родительского компонента его дочерним, формирующий основу однонаправленного потока данных в дереве React-компонентов. Пропсы — это значения только для чтения, которые дочерний компонент получает как аргумент функции: в TypeScript описание ожидаемой формы задаётся через интерфейс или псевдоним типа, обеспечивая полную статическую типобезопасность во всём фронтенде. При передаче пропсов через несколько уровней дерева возникает паттерн «prop drilling», усложняющий поддержку кода, — именно поэтому Context API React и библиотеки управления состоянием, такие как zustand или Redux, используются для подъёма общего состояния. Деструктуризация пропсов прямо в сигнатуре функции (например, function Card({ title, children }: Props)) — идиоматичный подход в современном React. Понимание того, как React эффективно передаёт пропсы, в сочетании с инструментами вроде React.memo, помогает предотвращать ненужные перерендеры и поддерживать оптимальную производительность.
Как это работает
Передача props моделирует 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 внутри ребёнка (props read-only — мутация это тихий баг); проброс огромных объектов через 5+ уровней детей (prop drilling — используйте Context или композицию); создание новых объектов/функций-литералов в render как props (<C onClick={() => ...}/> рендерит ребёнка каждый рендер родителя — мемоизируйте или вынесите); приём style={{...}} как prop замораживает гибкость дизайн-системы. Интерфейсы props — маленькие и именованные.