时间戳

首页 > 解决方案 > 将子组件连接到 store 与将父组件连接到 store 并传递 props

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

问题描述

经过大量搜索并使用 React 和 React Native。我仍然对哪个最好使用以及在什么情况下有一个非常模糊的看法

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

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

使用 Redux 存储

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

标签： javascriptreactjsreact-nativereact-redux

解决方案

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

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

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

当我注意到我的应用程序正在缩放并且我的一些组件正在充当道具的代理时（我什至得到了一个词！“Propxy”），也就是说，它们从父级获取道具并在不使用它们的情况下传递它们，我通常在组件树的中间注入一个连接的组件，这样我就可以让树下的“propxy”组件更轻更苗条

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

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

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

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

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

推荐阅读