reactjs - 使用 Connect 或将数据作为 Prop 传递给 child

Question

我是 React 和 Redux 新手。我有一个场景，其中有这样的嵌套组件。

A > B > C > D

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

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

正确的做法是什么？

Answer 1

正如 redux 的作者 Dan Abramov 在 issue 中所说的那样

Both approaches of passing props down to children or connecting them to the store are appropriate, however having nested connect() components is actually going to give you more performance. The downside is they're slightly more coupled to the application and slightly harder to test, but that may not be a big issue.

他还阐述了一个很好的经验法则，可以在 reddit 上遵循。

我这样做:

• Start by using one container and several presentational components
• As presentational component tree grows, “middle” components start to pass too many props down
• At this point, I wrap some leaf components into containers so that “middle” components don’t need to accept and pass down props that are completely unrelated to them
• Repeat

他甚至有tweeted 关于这一点:

Try to keep your presentation components separate. Create container components by connecting them when it’s convenient.Whenever you feel like you’re duplicating code in parent components to provide data for same kinds of children, time to extract a container.

简单来说:

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

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

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

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