Стратегия разбивки компонентов React
Мне нужно реализовать дерево компонентов на React.
И мне интересно, какой достаточно хороший образец, как все сломать в дереве но с учетом масштабирования (кода или команды).
Обычно я использую следующий способ:
function UserAvatar(props) {
return <div><img src = "" alt = "" /></div>
}
function UserEmail(props) {
return <div>e-mail: [email protected]</div>
}
function UserSection(props) {
return (
<div className = "container">
<div className = "section">
<UserAvatar />
</div>
<div className = "section">
<UserEmail />
</div>
</div>
);
}
Но следует ли мне избегать всех этих разделов макета и сделать макет чище?
Один очевидный вариант - перейти в отдельный компонент компоновки.
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Рекомендуется хранить каждый Component в своих файлах, а затем импортировать их туда, где на них нужно ссылаться.
Кроме того, в вашем примере, скорее всего, вам нужно будет установить URL-адрес аватара и адрес электронной почты в качестве реквизита. Затем заставьте UserAvatar и UserEmail отображать значения. Кроме того, рекомендуется настроить propTypes, чтобы другие разработчики (и вы сами) знали, какие пропсы передавать.
Один из критериев разбивки компонентов на подкомпоненты - это когда они имеют дело с разными проблемами или когда размер файла становится слишком большим. Другой критерий - когда вам нужно повторно использовать этот компонент в каком-то другом контексте.
Надеюсь это поможет.
Рекомендации по разборке компонентов:
Когда ваш компонент делает слишком много. В идеале компоненты должны быть сосредоточены на выполнении одной (или нескольких, но не многих) задач. Самый очевидный признак - когда количество строк в коде становится слишком длинным. По приблизительным оценкам, комплектующих не должно быть больше 300 строк.
Если вы хотите повторно использовать компоненты в нескольких родительских компонентах, вам придется их разбить.
Если вы хотите оптимизировать
render()определенных поддеревьев компонента с помощьюshouldComponentUpdate(), то вы должны разбить их, поскольку вы можете реализоватьshouldComponentUpdate()только на уровне компонентов.Отделение логики выборки данных от логики рендеринга и обработки взаимодействия с пользователем. Вместо того, чтобы заставлять один компонент выполнять и выборку данных, и (рендеринг и обработку взаимодействий с пользователем), разбейте их на более мелкие компоненты, чтобы вы могли тестировать компоненты по отдельности:
- Убедитесь, что первый компонент получает данные.
- Убедитесь, что второй компонент правильно отображает данные и может реагировать на действия пользователя.
- Подробнее об этом здесь
Еще много хороших ответов Кента С. Доддса здесь.