Redux：连接组件列表的性能

Question

我有一些<List>连接组件，它将许多属性传递给<ListItem>组件。它已经到了需要重构的地步，因为传递的属性太多了。

假设我转动表格，而是将<ListItem>作为连接组件，这样我就不需要传递这么多属性了。我是否期望看到性能下降或我的UI呈现性能提高？

我做了一些阅读，但无法找到我的问题的确切答案。

Answer 1

通常，连接更多组件对性能更好，因为运行更多mapState函数的成本低于执行更多“浪费”组件重新渲染的成本。

请参阅performance和connecting multiple components上的Redux FAQ条目，以及我的博客文章Practical Redux, Part 6: Connected Lists and Performance了解更多详情。

Answer 2

您不需要逐个传递所有道具。您可以使用spread运算符一次传递所有道具：

<List myProp={myProp} {...rest} />

这将发送一个道具myProp和所有其他道具存在于rest道具。

或者，您可以传递所有道具：

<List {...props} />

在ListItem组件中：

const { myOtherProp1, myOtherProp2 } = props
<ListItem myOtherProp1={myOtherProp1} myOtherProp2={myOtherProp2} />

---

此外，您可以传递您认为组件所需的默认道具：

List.defaultProps = {
  myOtherProp3: 'My default prop 3'
  myOtherProp10: 'My default prop 10'
}

这样你就可以传递所有道具，但是当你需要使用它们时使用它们。

---

要回答您的确切问题：

不会。没有性能损失。道具没有限制。您可以根据需要传递任意数量。接收组件将从单一来源props获得所有道具。

Answer 3

扩展@Bhojendra Rauniyar对你的确切问题的答案：传递道具不会减慢React，因为它不会复制信息，它只是创建一个非常便宜的指针。 Javascript通常像这样工作，例如：

a = {foo:'bar'}
b = a
b.foo = "another bar"
console.log(a.foo)
    > "another bar"

Javascript回收了对a.foo的引用，而不是将其复制到b.foo。所以改变b.foo也改变了a.foo。