Что такое чистые ,умные и глупые компоненты? в REACT кратко

Привет, Вы узнаете о том , что такое Что такое чистые , умные и глупые компоненты? в REACT, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое Что такое чистые , умные и глупые компоненты? в REACT , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).

точно так же, как

за исключением того, что он обрабатывает

метод для вас. При изменении реквизита или состояния PureComponent будет выполнять поверхностное сравнение как реквизита, так и состояния. С другой стороны, компонент не будет сравнивать текущий реквизит и состояние со следующим из коробки. Таким образом, компонент будет перерисовываться по умолчанию при каждом

вызове.

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

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

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

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

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

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

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

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

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

Исследование, описанное в статье про Что такое чистые , умные и глупые компоненты? в REACT, подчеркивает ее значимость в современном мире. Надеюсь, что теперь ты понял что такое Что такое чистые , умные и глупые компоненты? в REACT и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)