将子组件连接到存储与将父组件连接到存储并传递道具

Question

经过大量搜索并使用React和React Native。我对哪一个仍然有相当模糊的意见 最好在什么情况下使用

1. 使父组件连接到存储，并将所有数据作为道具传递给子功能组件。我最初使用的是“ React”方式，但很快我就发现随着应用程序的增长，此父组件处理的逻辑量开始变得又大又混乱。子组件也开始拥有自己的子组件，因此等等。

2. 具有功能正常的父组件（例如，Screen），并且每个需要从商店中获取信息的子组件都将与其连接。这是更“干净”的解决方案，但会创建很多不必要的存储连接“重复项”。

使用Redux商店

我的问题通常是更推荐使用的模式以及在哪些用例中，也很高兴知道拥有大量连接的（容器）组件的价格是多少

Answer 1

由于每个问题都有其优点和缺点，因此不确定我是否可以对此问题提供正确或错误的答案。
我的经验法则是仅当其父级是“道具的代理”时才连接深层嵌套的组件。也就是说，他们接受道具只是为了将道具传给孩子。

如果我可以引用this answer中的（我自己）：

  

请尽可能避免连接组件，并将道具传递给   孩子们，主要原因是为了防止对孩子的依赖   redux。我更喜欢使组件保持“哑巴”状态，让它们   只关注事物的外观。我确实有一些组件   关注事物应该如何工作，这些组件主要是   处理逻辑并将数据传递给孩子，他们是   我经常连接的组件。

     

当我注意到我的应用正在扩展并且某些组件在   充当道具的代理人（我什至有个话！“ Propxy”），   那是他们从父母那里得到道具，然后把它们传下来而没有   使用它们，我通常会在中间插入一个连接的组件   组件树，这样我就可以让“代理”组件掉下来   流量变得更轻薄

您还应该注意，连接的组件还有一个陷阱，那就是每个渲染都将触发mapstateToProps方法。如果您有一些沉重的逻辑，应该记住它，通常使用reselect

关于连接组件的好处，您可能已经意识到了。您可以通过react的上下文快速访问Provider的状态。

修改
作为您评论的后续内容：

  

关于渲染-如果病态有一个深度嵌套的子级（在中型到大型应用程序中常见），我将没有更多不必要的渲染

如果connect的先前对象与返回的当前对象相同，则mapStateToProps HOC包装器将不会触发重新渲染。因此不会对您连接的组件进行不必要的重新渲染。
您可以在this article

中详细了解其工作原理以及逻辑随时间的演变情况。

Answer 2

从性能上讲，使用connect连接多个组件的速度更快，然后在一个容器中提取所有数据，然后通过props分发给它的子组件。引用Dan Abramov（redux的创建者）：

  

将道具传递给孩子或将其连接到商店的两种方法都是合适的，但是嵌套的connect（）组件实际上将为您带来更高的性能。缺点是它们与应用程序的耦合程度更高，并且测试起来也较难，但这可能不是一个大问题。

     

尝试将您的演示文稿组件分开。通过在方便时连接它们来创建容器组件。每当您想在父组件中复制代码以为相同种类的子代提供数据时，就该抽出容器了。

因此，最终的决定权就在您身上，如果您有多个嵌套组件，那么让一些容器通过props来获取数据并进行分发更容易阅读和测试，但是如果性能至关重要，那就继续吧并在所有有状态组件中使用connect。

有几个链接可能对您有用：

• This Reddit's post about subcomponents
• This great article about how Redux works

Answer 3

我使用第一个选项。 您所写的缺点是正确的，但我认为这样更容易调试和理解数据流。

Answer 4

• 如果当前组件不使用来自 redux 的数据并且只是通过数据，则不要将组件连接到 redux。
• 如果组件使用数据，则连接到 redux。
• 如果当前组件使用来自 redux 的数据并且下一个组件也使用它，那么您可以传递并且不需要将下一个组件连接到 redux。

主要规则： 如果从父到子的数据使用链中存在间隙，则不需要将数据从父到子传递

connect(parent)（不要使用道具）=> child（不要使用）=> child（不要使用）=> child（使用）-最好连接最后一个孩子。道具掉落相关问题