在 ReactJs 中，从 redux 存储或从父级到子级将 props 传递给子组件的最佳实践是啥？

Posted 2023-03-29

【中文标题】在 ReactJs 中，从 redux 存储或从父级到子级将 props 传递给子组件的最佳实践是啥？

【英文标题】：What is the best practice for passing props to child component in ReactJs, from the redux store or from parent to child?在 ReactJs 中，从 redux 存储或从父级到子级将 props 传递给子组件的最佳实践是什么？

【发布时间】：2019-05-23 13:49:41

【问题描述】：

在我的 ReactJs 应用程序中，我有一个 redux 商店。在父组件中，我从 redux 商店获取道具。现在，我想将此道具传递给子组件。我有两种方法可以做到这一点： 1. 从父组件向子组件发送 props。 2. 从子组件中的 redux store 中获取 prop。

首选哪种方式，为什么？

虽然两者都会导致相同的结果。我想知道两者之间的区别以及哪种方法是首选方法。

【问题讨论】：

你也可以使用 Contex API...

我更喜欢使用只需要 props 的哑组件，以及连接到 store 的容器来获取给定组件所需的特定 props。例如User = props => props.username , UserContainer = connect( /* map state to props */ )(User)

在尽可能低的级别连接您的组件，在本例中为子组件。

【参考方案1】：

答案是基于意见的，请尝试下一个规则拇指：

在每个步骤中，如果您的组件不是可读或难以维护，那么您将进入下一步。

您首先使用Context API => 状态管理器传递道具=>。 p>

【参考方案2】：

您要问的问题是关于演示组件 VS 容器组件的主题。

容器通常包含业务逻辑，容器也连接到 Redux 存储。

Presenters 应该只显示来自你传入的 props 的数据。

这种方法有很多好处。提高了代码的可读性、可测试性、更好的关注点分离等等。

在此处继续 - [https://redux.js.org/basics/usage-with-react#presentational-and-container-components][1]

【讨论】：

没有。基本上我有 2 个容器组件。现在我可以将道具从父母传递给孩子。或者我可以从 redux store 中从子容器本身获取道具。想知道哪种方式是首选方式？

如果您不需要，首选方式是没有 2 个容器组件。如果它已经完成并且你的子组件已经是一个容器，那么这个决定的全部目的是能够卸载父组件，这意味着你应该将它连接到 Redux 存储，不是吗？

【参考方案3】：

在我看来，我认为结构应该与你的回购协议的其余部分保持一致。如果您将所有智能容器都连接到 redux，请继续使用该行，这样其他人会更清楚地阅读您的代码。