在“索引”页面上，编辑1行时，所有行都将重新呈现（非常缓慢）。 在Ruby on Rails上使用Reactjs

使用： – ruby​​“2.3.1”gem“rails”，“5.0.0.1”gem“react_on_rails”，“〜> 6.3.2”

这是我的问题：

问题

单击复选框会将联系人添加到$$selectedContacts ，但随后每个联系人都会重新呈现，这非常慢

！[联系人索引]
这是用户页面的图片:(一个简单的索引页面） http://take.ms/e7gXG

问题

1. 如何在Contact.jsx正确使用shouldComponentUpdate ，以便联系行仅在更改后重新呈现？
2. 我应该在哪里使用容器？ 感觉在Contact.jsx使用connect可能不是最好的选择？
3. 任何其他建议

这是一个关于要点的链接： https ： //gist.github.com/heyogrady/4ba880c7ecffe18fdb70ad2d56e034cc

Answer 1

1. 更改Contact以扩展React.PureComponent ，这是使用纯渲染的最新方式。 （ docs ）

2. 容器组件通常是具有业务逻辑的组件，而表示组件是具有纯视图逻辑的组件。 Redux类型通过connect方法取代容器组件。 这是一个风格问题，但很多时候渲染集合只是connect父节点，然后映射项目并将它们提供给未连接到Redux的哑组件，这很容易

3. 通过将整个集合的数据传递给每个Contact ，可以减轻纯渲染的有效性。 这意味着如果任何单个联系人的数据发生变化，那么所有联系人都将重新呈现，因为PureComponent无法知道哪些道具是相关的，哪些不相关。 因此，您应该只传递每个联系人需要的数据。 我写了一篇关于使用PureComponent时可能遇到的一些陷阱的快速博客文章 。