Redux：已连接组件列表的性能

Question

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

假设我转过桌子，而是将<ListItem>设为一个已连接的组件，这样就不需要我传递太多的属性了。我期望看到UI渲染的性能下降或性能提高吗？

我已经阅读了一些书，但是找不到确切的答案。

Answer 1

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

有关更多详细信息，请参阅performance和connecting multiple components上的Redux常见问题解答条目以及我的博客文章Practical Redux, Part 6: Connected Lists and Performance。

Answer 2

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

<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。