Композиция компонентов в React: как сделать это правильно
При разработке приложения на React возникает сложность в разделении компонентов и их правильной композиции между собой. Некоторые разработчики не разделяют компонент на более мелкие и получают большой компонент-монолит, который в дальнейшем сложно поддерживать. Также некоторые разработчики начинают разделять компонент на более мелкие подкомпоненты слишком рано, что приводит к оверинженирингу и сложно поддерживаемому коду.
В React есть несколько подходов к композиции компонентов. Есть “простые” компоненты:
const Button = ({ title, onClick }) => <button onClick={onClick}>{title}</button>;
И компоненты контейнеры:
const Button = ({ children, onClick }) => <button onClick={onClick}>{children}</button>;
У компонента контейнера вместо пропса title проп children. Это различие позволяет более гибко использовать компонент контейнер и передавать в children любые элементы, при этом синтаксис выглядит как использование обычного HTML тега.
Можно определить следующие правила для декомпозиции компонента:
- Начинайте реализацию “сверху вниз”. Если делать “снизу вверх”, т.е. сначала создавать небольшие переиспользуемые компоненты, то возможно у вас получится компонент со слишком сложным API и будет отсутствовать половина нужного функционала.
- Создавайте подкомпонент только тогда, когда в этом есть необходимость. Одно из возможных причин, когда компонент нужно декомпозировать – это его размер.
- Начинайте композицию с “простых” компонентов, а другие подходы композиции используйте по мере необходимости.
Также стоит отметить про принцип Единый Уровень Абстракции (Single Level of Abstraction).
www.developerway.com/posts/c…it-right
