将子组件连接到 store 与将父组件连接到 store 并传递 props答案

【问题标题】：Connecting child components to store vs connecting parent component to store and passing down props将子组件连接到 store 与将父组件连接到 store 并传递 props
【发布时间】：2019-08-22 23:10:57
【问题描述】：

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

让父组件连接到 store 并将所有数据作为 props 传递给子功能组件。这虽然是我最初的“反应”方式，但很快我就看到随着应用程序的增长，这个父组件处理的逻辑量开始变得很大和混乱。子组件也开始有自己的子组件，所以等等。
拥有功能正常的父组件（例如Screen），并且每个需要来自商店的信息的子组件都将连接到它。这是更“干净”的解决方案，但会创建大量不必要的商店连接“重复”。

使用 Redux 存储

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

【问题讨论】：

第二个更推荐，因为使用 Redux devtools for Chrome 进行调试很容易。应将子组件中的公共道具提取到全局存储/状态。如果你有很多连接的组件，更新到 store 中的 1 个变量将导致所有组件重新渲染/更新，从而滞后。然后，您需要更多地分解您的商店（首选），或者使用 shouldComponentUpdate。
谢谢，这正好强化了我的想法

标签： javascript reactjs react-native react-redux

【解决方案1】：

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

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

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

当我注意到我的应用程序正在扩展并且我的一些组件正在扩展时作为道具的代理（我什至得到了一个词！“Propxy”），也就是说，他们从父母那里得到道具，并在没有使用它们，我通常在中间注入一个连接的组件组件树，这样我就可以让“propxy”组件沿着树向下流量更轻更苗条

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

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

编辑
作为您评论的后续行动：

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

如果mapStateToProps 的前一个对象与返回的当前对象相同，那么connect HOC 包装器不会触发重新渲染。因此不会对连接的组件进行不必要的重新渲染。
您可以在this article 中阅读有关其工作原理以及逻辑如何随时间演变的更多详细信息

【讨论】：

说实话，当我不得不将逻辑放入 mapStateToProps 时，我有 0 个用例。它总是返回一个对象，就是这样。关于渲染 - 如果我有一个深层嵌套的子级（在大中型应用程序中很常见），在每次父级更新时会不必要地重新渲染，我会不会有更多不必要的渲染？

【解决方案2】：

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

【讨论】：

实际上，如果您使用redux-logger，则更容易调试第二个选项。至少根据我的经验

【解决方案3】：

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

主要规则： 如果父子之间的数据使用链存在差距，则不需要将数据从父子传递给子

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

【讨论】：