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



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

  1. 将父组件连接到存储,并将所有数据作为 prop 传递给子功能组件。我最初是"React"方式,但很快我就看到,随着应用程序的增长,这个父组件处理的逻辑量也开始变得又大又乱。此外,子组件开始拥有自己的子组件,依

    此类推。
  2. 具有正常运行的父组件(例如Screen),并且需要存储中信息的每个子组件都将连接到它。这是更"干净"的解决方案,但会产生许多不必要的商店连接"重复"。

使用 Redux 存储

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

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

如果我可以引用(我自己)这个答案:

尽可能避免连接组件,并将道具传递给 孩子,主要原因是防止依赖 重新。我更喜欢让我的组件尽可能"愚蠢"并让它们 只关心事情应该是什么样子。我确实有一些组件 关注事情应该如何运作,这些组件主要是 处理逻辑并将数据传递给孩子,他们是 我经常连接的组件。

当我注意到我的应用程序正在扩展并且我的某些组件正在扩展时 充当道具的代理(我什至得到了一个词!"普罗克西"), 也就是说,他们从父母那里得到道具,并在没有的情况下传递下去 使用它们,我通常在中间注入一个连接的组件 组件树,所以我可以让"属性"组件在树下 流动更轻薄

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

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

编辑
作为评论的后续:

关于渲染 - 如果 Ill 有一个深度嵌套的子级(在大中型应用程序中很常见),我会不会有更多不必要的渲染,这些子级将在每次父更新时不必要地重新渲染

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

我使用第一个选项。 您编写的缺点是正确的,但我认为以这种方式调试和理解数据流更容易。

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

主要规则:如果从父级到子级的数据使用链存在差距,则无需将数据从父级传递到子级

连接(父级)(不使用道具)=>子项(不使用)=>子项(不使用)=>子项(使用) - 最好连接最后一个子项。与道具干燥有关的伊苏埃

最新更新