Умные и глупые компоненты React

    Делал перевод статьи 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 и так далее. Все это не абсолютно тоже самое но идея похожа.

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

    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.
    • +8
    • 12,5k
    • 8
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 8
    • 0
      Умные компоненты это новый ViewModel?
      • 0
        Вы имеете ввиду ViewController?
        • +1
          ViewModel. Вообще особой разницы нету, то что связывает Model/State с DOM деревом :)
          • 0
            Понял, вы имеете ввиду ViewModel из-за того что умный компонент имеет доступ к данным, да, по-моему норм сравнение, я думал что из-за того что он держит в себе другие умные/глупые компоненты )
            • 0
              ViewModel и умный компонент не одно и тоже.
              ViewModel вообще не знает про View. View использует ViewModel. (можно иметь очень много View для одного и того же ViewModel)
              В React связь обратная — умные компоненты управляют глупыми. Тут более очевидно сравнение с Controller. (вы уже не можете иметь много представлений, для каждого из них вам придется писать свой умный компонент)
      • 0
        Какую реализацию Flux вы используете? Redux?
        • 0
          • +1
            Redux это не Flux, он взял «лучшие идеи» из него, а также из Elm и тому подобных вещей (Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm).

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.