使用 Connect 或将数据作为道具传递给孩子

Question

我是 react 和 redux 的新手。我有这样的嵌套组件的场景。

A > B > C > D

A 组件中使用了一个属性，它将在 D 组件中使用。所以，我有两种方法：

1. 从组件 A 中的 redux 存储中获取状态，然后将其作为 props 传递给它的所有子组件，即使它只会在 D 组件中使用。
2. 我应该连接到组件 D 中的 redux 存储并从那里获取该属性。

正确的做法是什么？

Answer 1

正如 redux 的作者 Dan Abramov 在此 issue

中所说

将道具传递给孩子或将它们连接起来的两种方法 到商店是合适的，但是嵌套了connect() 组件实际上会给你更多的性能。这 缺点是它们与应用程序的耦合度更高，并且 稍微难测试，但这可能不是什么大问题。

他还在 reddit

上阐述了一个很好的经验法则

我是这样做的：

• 首先使用一个容器和几个展示组件
• 随着展示组件树的增长，“中间”组件开始向下传递太多道具
• 此时，我将一些叶子组件包装到容器中，这样“中间”组件就不需要接受和传递 与他们完全无关
• 重复

他甚至有tweeted对此：

尝试将您的演示文稿组件分开。创建容器 在方便的时候通过连接它们来连接组件。每当你觉得你在父组件中复制代码来为相同类型的子组件提供数据时，是时候提取一个容器了。

简单来说：

您可以在任何级别使用connect()。这样做会使组件变得智能，因为它知道它的 props 来自哪里。一个愚蠢的组件只有道具，它们可以来自任何地方。一个智能组件与 redux 耦合；一个愚蠢的组件不是。

更新：react-redux v7 及更高版本

同样的概念也适用于useSelectors。如果容器组件的多个子组件使用相同的数据，您可以在容器组件中接收数据并传递给您的展示组件

如果子组件使用的数据不同，您可以选择在子组件中单独使用useSelector。这将确保只有那些实际需要重新渲染的组件

Answer 2

如果您已经在应用中使用 redux，我建议您在 redux 商店中设置属性并在组件 D 中获取它。

但如果工作流程真的很简单，并且所有数据都是从每个视图的单一来源获取的，那么您可以避免使用 redux，因为它用于复杂的状态管理。