Значения по умолчанию
Тема дорожной карты · React
Дефолтные пропсы в React позволяют компонентам задавать резервные значения для пропсов, которые не переданы явно родителем, гарантируя, что компонент всегда имеет данные для корректного рендеринга. В современном React с функциональными компонентами и TypeScript значения по умолчанию идиоматичнее всего задаются через синтаксис параметров по умолчанию JavaScript прямо в сигнатуре функции (например, function Button({ label = "Click me" }). Устаревшее статическое свойство Component.defaultProps по-прежнему поддерживается, но было упразднено в React 19 в пользу деструктуризации с параметрами по умолчанию. Задание разумных дефолтных пропсов улучшает переиспользуемость компонента, снижает потребность в защитных проверках на null внутри JSX и делает API компонентов самодокументирующимися для других разработчиков. Понимание дефолтных пропсов — и их взаимодействия с типами пропсов TypeScript — является фундаментальным навыком в разработке React-компонентов.
Как это работает
Значения по умолчанию моделирует 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 — маленькие и именованные.