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

Posted 2023-02-22

【中文标题】将子组件连接到 store 与将父组件连接到 store 并传递 props

【英文标题】：Connecting child components to store vs connecting parent component to store and passing down props

【发布时间】：2019-08-22 23:10:57

【问题描述】：

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

让父组件连接到 store 并将所有数据作为 props 传递给子功能组件。这虽然是我最初的“反应”方式，但很快我就看到随着应用程序的增长，这个父组件处理的逻辑量开始变得很大和混乱。子组件也开始有自己的子组件，所以等等。

拥有功能正常的父组件（例如Screen），并且每个需要来自商店的信息的子组件都将连接到它。这是更“干净”的解决方案，但会创建大量不必要的商店连接“重复”。

使用 Redux 存储

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

【问题讨论】：

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

谢谢，这正好强化了我的想法

【参考方案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 (使用) - 最好连接最后一个孩子。道具旋转相关的问题