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

IT技术 reactjs redux react-redux
2021-03-25 03:30:52

我是 react 和 redux 的新手。我有一个场景,其中有这样的嵌套组件。

A > B > C > D

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

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

正确的做法是什么?

2个回答

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

将 props 传递给 child 或将它们连接到 store 的两种方法都是合适的,但是嵌套connect() 组件实际上会给你更多的性能。缺点是它们与应用程序的耦合度稍高,测试难度稍大,但这可能不是什么大问题。

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

我这样做:

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

对此,他甚至发了一条推文

尽量保持你的演示组件分开。在方便的时候通过连接容器组件来创建容器组件。每当你觉得你在父组件中复制代码来为相同类型的子组件提供数据时,是时候提取容器了。

所以简单来说:

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

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

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

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

好好研究!
2021-06-10 03:30:52

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

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