Почему redux предлагает только подключиться к компонентам верхнего уровня?

Ответ 1

Как уже упоминалось, Абрамов (редактор Redux) обратился к своим советам: connect() ed components. Он сформулировал хорошее эмпирическое правило в этой записи Reddit по теме:

Я делаю так:

• Начните с использования одного контейнера и нескольких презентационных компонентов

• Когда дерево презентационных компонентов растет, "средние" компоненты начинают пропускать слишком много реквизитов вниз.

• В этот момент я переношу некоторые компоненты листа в контейнеры, чтобы "средние" компоненты не должны принимать и пропускать реквизиты, которые полностью не связаны с ними.

• Повторите

Если вы посмотрите последние десять видеороликов моего курса на Egghead, это именно тот подход, который я демонстрирую: https://egghead.io/series/getting-started-with-redux

В моем чтении первоначальный совет connect() не имел ничего общего с производительностью и все, что связано с модульными компонентами и простотой рассуждения о потоке данных в более крупных приложениях.

Фактически, больше connect() ed компонентов может быть преимуществом производительности по сравнению с 1-контейнером к правилу-все-все-тяжелые модели. Абрамов еще раз:

Оба подхода хороши, и вложенные компоненты connect() на самом деле будут давать вам больше производительности. Недостатком является то, что они немного связаны с приложением и немного сложнее тестировать, но это может быть не большая проблема.

Ответ 2

Когда у меня был один контейнер наверху, у меня были проблемы с эффективностью, потому что React повторно передал все мои компоненты во время малейшего обновления где-то в дереве. Поэтому я отказался от этого подхода и сделал свое приложение против документов, которые оказались быстрее.

Но позже я увидел, что даже автор Redux написал в своем Twitter:

Подчеркивание "одного компонента контейнера в верхней части" в примерах Redux было ошибкой. Не принимайте это как максиму.

https://twitter.com/dan_abramov/status/668585589609005056

и

Попробуйте разделить компоненты презентации. Создавайте компоненты контейнера, подключая их, когда это удобно. https://twitter.com/dan_abramov/status/668586001175048192

Ответ 3

Ответ приведен в этом разделе из выдержки из документации:

В то время как технически вы можете подключить() любой компонент вашего приложения к Redux хранить, избегайте делать это слишком глубоко, потому что это сделает поток данных труднее отслеживать.

Одним из основных принципов Redux является то, что данные, как правило, передаются сверху вниз, то есть должны быть однонаправленными. Если вы connect слишком много компонентов нижнего уровня, ваш поток данных больше не является однонаправленным. Главным следствием этого является то, что гораздо проще иметь несогласованное состояние среди ваших компонентов.

При переходе сверху вниз, что, естественно, происходит, когда вы подключаете только ограниченное количество компонентов высокого уровня, гораздо труднее создавать ситуации, когда у вас непоследовательное состояние, следовательно, советы в документах.

Ответ 4

В некоторых случаях вы можете использовать connect() ed компоненты глубже. Я бы не стал толковать документацию так строго.

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

Если вы обнаруживаете, что постоянно создаете реквизит вниз по цепочке компонентов, возможно, пришло время добавить контейнер:

// A blog post view component
render () {
  const {post} = this.props;

  return (
    <div>
      <h1>{post.title}</h1>

      <Author author={this.props.author}
        onClick={this.props.favAuthor}
        onHover={this.props.authorDetails}
        isAuthorFaved={this.props.isAuthorFaved}
        isAuthorFollowed={this.props.isAuthorFollowed}/>
    </div>
  )
}

В этом случае почтовый компонент не имеет никакого использования или нуждается в каких-либо реквизитах, используемых для <Author/>. Возможно, вы захотите рассмотреть возможность создания <AuthorContainer author={this.props.author}/>. Автору принадлежит сообщение, поэтому вам понадобится эта информация. Остальное можно вычислить с использованием состояния в контейнере mapStateToProps(state, ownProps), где ownProps.author является объектом автора.

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