为什么redux建议只连接到顶级组件？

Question

我是redux和react-redux的新手,同时我正在努力制作一个redux应用程序.

我不理解redux文档的声明:

然后,我们使用来自react-redux的connect()函数将我们想要连接到Redux的组件包装起来.尝试仅针对顶级组件或路由处理程序执行此操作.虽然从技术上讲,您可以将应用程序中的任何组件()连接到Redux存储,但要避免这样做太深,因为这会使数据流更难以跟踪.

是否更容易连接到所有组件,并且在更新状态时,每个组件都可以获得新的状态树？

为什么哑组件和高级容器？

谢谢.

Answer 1

如上所述,Abramov(Redux作者)已经回顾了他的建议:connect()ed组件.他在这篇关于这个主题的Reddit帖子中阐述了一个很好的经验法则:

我是这样做的:

1. 首先使用一个容器和几个表示组件

2. 随着表示组件树的增长,"中间"组件开始传递过多的支持

3. 此时,我将一些叶子组件包装到容器中,以便"中间"组件不需要接受并传递与它们完全无关的道具

4. 重复

如果您观看我在Egghead课程中的最后十个视频,这正是我演示的方法:https://egghead.io/series/getting-started-with-redux

从我的阅读来看,最初的建议与connect()性能无关,与模块化组件有关,与大型应用程序中的数据流易于推理有关.

事实上,更多connect()ed组件可能是一个性能优势,而1-container-to-rule-them-all-top-heavy模式. 阿布拉莫夫再一次:

这两种方法都很好,并且嵌套的connect()组件实际上会为您提供更多性能.缺点是它们与应用程序的耦合稍微多一些,并且稍微难以测试,但这可能不是一个大问题.

Answer 2

当我在顶部有一个容器时,我遇到了效率问题,因为React在树中某处稍微更新时重新渲染了我的所有组件.所以我放弃了这种方法,并使我的应用程序反对文档,结果证明更快.

但后来我看到甚至Redux的作者都在Twitter上写道:

在Redux示例中强调"顶部的一个容器组件"是一个错误.不要把它当作格言.

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

和

尽量将您的演示文稿组件分开.通过在方便的时候连接它们来创建容器组件. https://twitter.com/dan_abramov/status/668586001175048192

Answer 3

connect()在某些情况下，您可以更深入地使用ed 组件。我不会如此严格地解释文档。

一般来说，如果您发现自己从组件中传递了太多道具，并且执行传递的组件没有使用这些道具，那么可以将它们移动到单独的容器组件中。

如果您发现自己不断地在组件链中写入 props，那么可能是时候添加一个容器了：

// 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>
  )
}

在这种情况下，post 组件没有任何使用或需要用于 的任何 props <Author/>。您可能想考虑制作一个<AuthorContainer author={this.props.author}/>。作者属于该帖子，因此您将需要这些信息。其余的可以使用容器mapStateToProps(state, ownProps)函数中的状态来计算，其中ownProps.author是作者对象。

再说一次，这是一个人为的例子，但最终的逻辑归属取决于你。