Умные и глупые компоненты React10.09.2015 12:03

сегодня в 00:38

Делал перевод статьи The land of undocumented react.js: The Context, где сослался на статью Dan Abramov про умные и глупые компоненты, но почему-то думал что она есть на habrahabr. Думаю эта небольшая статья ни для кого лишней не будет.
Перевод статьи Smart and Dumb Components

Есть простой шаблон, который я нахожу чрезвычайно полезным, когда пишу приложения на React. Если Вы работали с React какое-то время, то, вероятно Вы уже поняли это. Это хорошо объяснено в этой статье, но я хочу добавить пару пунктов.

Вы найдете, что Ваши компоненты намного проще в реиспользовании и обсуждении, если Вы поделите их на две категории. Я называю их Умные (Smart) и Глупые (Dumb), но я так же слышал Fat и Skinny, Stateful и Pure, Screens и Components и так далее. Все это не абсолютно тоже самое, но идея похожа.

Мои глупые компоненты:

не зависят от остальной части приложения, например Flux actions или stores
часто содержатся в this.props.children
получают данные и колбэки исключительно через props
имеют свой css файл
изредка имеют свой state
могут использовать другие глупые компоненты
примеры: Page, Sidebar, Story, UserInfo, List

Мои умные компоненты:

оборачивает один или несколько глупых или умных компонентов
хранит состояние стора и пробрасывает его как объекты в глупые компоненты
вызывает Flux actions и обеспечивает ими глупые компоненты в виде колбэков
никогда не имеют собственных стилей
редко сами выдают DOM, используйте глупые компоненты для макета
примеры: UserPage, FollowersSidebar, StoryContainer, FollowedUserList

Я кладу их в разные папки, чтобы сделать их различие явным.

Профит от такого подхода

Лучшее разделение ответственности. Вы понимаете Ваше приложение и Ваш UI лучше, если пишете компоненты таким способом.
Лучшая реюзабельность. Вы можете использовать один и тот же глупый компонент с абсолютно разными источниками состояния.
Глупые компоненты — это фактически «палитра» Вашего приложения, Вы можете поместить их все на одну страницу и дать дизайнеру их настроить, на залезая в логику приложения. Вы можете запустить регрессивное тестирование на такой странице.
Это заставляет Вас извлекать «компоненты макеты», такие как Sidebar, Page, ContextMenu и использовать this.props.children вместо дублирования одной и той же верстки в различных умных компонентах.

Помните, компоненты не должны выдавать DOM. Они должны только обеспечить границы между UI.

↑
—
↓
1239
Добавить в избранное 29