Паттерны
Тема дорожной карты · React
Продвинутые паттерны React — это переиспользуемые архитектурные решения, которые помогают фронтенд-разработчикам создавать более гибкие и поддерживаемые компонентные архитектуры. Паттерны Render Props, Higher-Order Components (HOCs) и Compound Component позволяют опытным React-разработчикам совместно использовать логику состояния и поведение компонентов без дублирования кода. Паттерн Render Props передаёт функцию как пропс, позволяя компоненту делегировать решения о рендеринге родительскому компоненту, тогда как HOC оборачивает компонент для добавления пропсов или поведения. Понимание продвинутых паттернов React необходимо для построения масштабируемых приложений, а современные альтернативы на основе хуков — useContext и кастомные хуки — упростили реализацию многих классических паттернов. Освоение этих паттернов готовит разработчиков к оценке сторонних библиотек и проектированию надёжных решений для управления состоянием.
Как это работает
Паттерны покрывает переиспользуемые техники композиции: Compound Components (родитель + дети делят state через Context — <Tabs><TabList><Tab/></TabList></Tabs>), Render Props (компонент принимает функцию, возвращающую JSX — <X>{value => <Y v={value}/>}</X>), Higher-Order Components (функция, оборачивающая компонент — withAuth(Page)), Portals (рендер в другое поддерево DOM через createPortal), Error Boundaries (классовые компоненты, ловящие render-ошибки через componentDidCatch).
Когда применять
Compound Components — для UI-примитивов, где родитель + дети делят контракт (Tabs, Accordion, Select). Portals — для модалок, тултипов, toast, которым нужно сбежать из overflow:hidden или stacking context. Оборачивайте всё приложение (и рискованные поддеревья) в Error Boundary — иначе брошенная render-ошибка обнуляет страницу. Render Props и HOC в основном вытеснены хуками; берите их только в legacy-библиотеках.
Типичные ошибки
Ловушки Паттерны: переизобретение Compound Components, когда react-aria или Radix уже дают accessible-примитивы; Portal-контент теряет Context родительского React-дерева (portal формально в дереве, но если забыли — accessibility ломается); Error Boundaries, тихо съедающие ошибки без логирования (никогда о них не узнаёте); HOC-пирамида (withA(withB(withC(Page))) — хуки заменили). Используйте готовые библиотеки перед своими абстракциями.