В этом задании мы научимся разбивать большой компонент на маленькие независимые части.
Декомпозиция - это разделение сложной системы на простые элементы. Представьте LEGO конструктор - вместо одного огромного блока у вас много маленьких деталей, из которых можно собрать что угодно.
В React большой компонент со множеством элементов становится сложным для понимания и поддержки. Лучше разбить его на несколько маленьких компонентов, каждый из которых отвечает за свою часть интерфейса.
Например, компонент профиля можно разбить на:
Avatar - аватар пользователя
ProfileHeader - заголовок с именем и должностью
ProfileDetails - детальная информация
Каждый маленький компонент:
Легче понять - он делает одну вещь
Легче тестировать - меньше кода для проверки
Можно переиспользовать - применить в других местах
Проще изменять - изменения изолированы
Вот пример декомпозиции:
// Было: всё в одном компонентеfunctionUserCard(){return(<divclassName="card"><imgsrc="avatar.jpg"/><h2>Иван</h2><p>ivan@example.com</p><button>Написать</button></div>);}// Стало: разбито на компонентыfunctionAvatar({ src }){return<imgsrc={src}className="avatar"/>;}functionUserInfo({ name, email }){return(<div><h2>{name}</h2><p>{email}</p></div>);}functionUserCard({ name, email, avatar }){return(<divclassName="card"><Avatarsrc={avatar}/><UserInfoname={name}email={email}/><button>Написать</button></div>);}
Теперь компонент Avatar можно использовать не только в UserCard, но и в шапке сайта, комментариях, списке пользователей.
Задание
Необходимо разбить монолитный компонент профиля на несколько маленьких компонентов. Создайте компонент Avatar, который принимает props emoji и отображает аватар с классом "avatar-emoji". Создайте компонент ProfileHeader, который принимает name, position и emoji, и отображает заголовок профиля (используйте внутри компонент Avatar). Создайте компонент ProfileDetails, который принимает email и phone, и отображает детальную информацию с кнопкой "Редактировать профиль". В компоненте App используйте ProfileHeader и ProfileDetails, передав в них соответствующие данные через props.
