Question

请原谅是否重复。

我刚刚经历了一些不错的Open source React+Redux projects，我来到了这个Ory-editor，他们试图在几乎每个组件中直接从商店获取数据。

示例 -

const Inner = ({
  isInsertMode,
  insertMode
}: {
  isInsertMode: boolean,
  insertMode: Function
}) => (
  <Button
    icon={<ContentAdd />}
    description="Add things"
    active={isInsertMode}
    onClick={insertMode}
  />
)

const mapStateToProps = createStructuredSelector({ isInsertMode })
const mapDispatchToProps = { insertMode }

export default connect(mapStateToProps, mapDispatchToProps)(Inner)

所以这让我想知道从redux-store直接获取所有组件的数据是一个好习惯，还是使用React props传递数据更好。

哪种方式更好更快？并没有伤害React的基本原则

Answer 1

在React中有一种“智能”和“哑”组件的模式，通常称为容器和演示组件。

我发现这是一篇非常有用的文章https://jaketrent.com/post/smart-dumb-components-react/，其中包含：

智能组件特征


描述工作原理

不提供DOM标记或样式

提供应用程序数据，进行数据提取

致电助焊剂行动

按惯例命名*容器


哑元组件特征


描述事物的外观

没有应用依赖

仅接收道具，提供数据和回调

很少有自己的状态，当他们这样做时，它只是UI状态

命名任何UI名词

希望我能帮忙！

Answer 2

即使您通过props传递数据，您仍然需要一次将其从redux-store中取出。

如果您要从另一个组件传递数据，您将混合该组件关注，即使只在一个组件中使用它，您也会发现自己将数据传递到3-4-5层。

redux-store的美妙之处在于您可以随处访问store，因此解耦组件。

Answer 3

我的建议总是首先编写哑组件，例如ComponentBase，而不是使用connect和create smart如果需要它。如果您需要可以直接传递道具的重用组件，或者您可以使用connect编写新的组件，例如将ComponentBase连接到不同的商店，这是很好的。

此方法也适用于测试，例如，如果您使用的是Storybook。

Answer 4

根据Redux FAQ entry on connecting multiple components：

早期的Redux文档建议您只应在组件树顶部附近放置一些连接的组件。然而，时间和经验表明，这通常需要一些组件来了解他们所有后代的数据要求，并迫使他们传递一些令人困惑的道具。

目前建议的最佳做法是将您的组件分类为“表示”或“容器”组件，并在任何有意义的地方提取连接的容器组件：


在Redux示例中强调“顶部的一个容器组件”是一个错误。不要把它当作格言。尽量将您的演示文稿组件分开。在方便时连接它们来创建容器组件。每当您觉得您在父组件中复制代码以为同类儿童提供数据时，就需要时间来提取容器。一般情况下，一旦您认为父母对“个人”数据或其子女的行为了解太多，就应该及时提取容器。


事实上，基准测试表明，与更少的连接组件相比，更多连接组件通常会带来更好的性能。

React Redux：使用props中的数据或直接从redux-store获取数据？哪一个更好？

4 个答案: