javascript - Redux：连接组件列表的性能

Question

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

假设我把桌子转过来，而是制作<ListItem>一个连接的组件，这样我就不需要向下传递这么多属性。我会期望看到我的 UI 渲染的性能下降或性能提高吗？

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

Answer 1

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

请参阅有关性能和连接多个组件的 Redux 常见问题解答条目，以及我的博客文章Practical Redux，第 6 部分：连接列表和性能以获取更多详细信息。

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。