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

Question

经过大量搜索并使用React和React Native。对于哪种方法最好使用以及什么情况下，我仍然存在模糊的看法

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

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

使用Redux存储

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

Answer 1

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

如果我可以引用这个答案（我自己） ：

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

当我注意到我的应用程序正在扩展并且我的一些组件充当道具的代理时（我什至有一个词来形容它！“Propxy”），那就是它们从父级获取道具并在不使用它们的情况下将它们传递下来，我通常在组件树的中间注入一个连接的组件，这样我就可以让“propxy”组件沿着树流变得更加轻薄

您还应该注意，连接组件的另一个陷阱是每次渲染都会触发该mapstateToProps方法。如果你有一些沉重的逻辑，你应该记住它，通常通过重新选择来完成

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

编辑
作为您评论的后续内容：

关于渲染 - 如果我有一个深层嵌套的子级（在中型到大型应用程序中常见），并且在每次父级更新时不必要地重新渲染，我不会有更多不必要的渲染

如果前一个对象与当前返回的对象相同， HOC包装connect器将不会触发重新渲染。mapStateToProps因此不会对连接的组件进行不必要的重新渲染。您可以在本文
中详细了解其工作原理以及逻辑如何随着时间的推移而演变