React + Redux - 为什么不连接所有组件？

Question

我曾经多次听到@connect只有顶层（智能组件）是一个好习惯，然后他们可以将道具传播到他们的低层（哑组件）。

在我看来，在@connect（ing）它们时仍然可以创建哑组件 - 只需将它们传递给原始对象\参数即可显示。

通过@connect将所有组件连接到商店是一种好的做法吗？ 是否有任何性能影响？

有什么想法吗？

Answer 1

Redux的作者Dan Abramov的推文：

  

在Redux示例中强调“顶部的一个容器组件”   一个失误。不要把它当作格言。

另请阅读他在https://twitter.com/dan_abramov/status/668585589609005056

的回复

Answer 2

丹·阿布拉莫夫几年前在一篇关于“媒介”的文章中发表过这样的讲话： https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.vtq34z4ir

他称之为“表现形式”与“容器”成分。我发现这些名字很奇怪而且令人困惑，这使得它（甚至）更难理解。但我收集的目标是能够将特定于应用程序的内容（包括与Redux存储的细节的连接）集中在容器组件中。

演示组件与您的特定应用程序更加隔离。它们更容易独立测试，因为它们很轻，可以在不调用Redux的情况下站起来。他们更有可能被重用，因为他们没有连接到你的应用程序的特定数据格式（或者根本没有连接到Redux）。

就个人而言，我不相信这种区别值得保持。真正重量轻，可重复使用的组件通常是从其他人那里导入的。实际上你写的任何东西最终都会与数据存储的细节联系起来......因为这是你首先编写它的重点。编写真正可重用的组件（以前没有编写过）是相对罕见的。如果你做了一个，事后就可以相对容易地解脱它。 （我很擅长过度思考你的框架，因为你往往会弄错它们并且无论如何都必须重构。）

尽管如此，这是一个由发明React的人直接支持的范例，并且有一个巨大的用户群在那里成功地用它编写代码。如果我是你的话，我会继续他的意见。

Answer 3

您不应该仅严格连接顶级组件。一旦你开始这样做，你会发现其中一些非常大，并传递他们实际上没有渲染或使用的数据。

该问题的解决方案是连接依赖于未使用数据的低级组件。您在组件树中移动的越低，组件将变得越通用（哑）和可重用。