在索引页面上,编辑 1 行时,所有行都在重新渲染(非常缓慢)。在 Ruby on Rails 中使用 Reactjs

IT技术 ruby-on-rails reactjs
2021-05-21 23:46:08

使用: - ruby​​ "2.3.1" gem "rails", "5.0.0.1" gem "react_on_rails", "~> 6.3.2"

这是我的问题:

问题

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

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

问题

  1. 如何正确使用shouldComponentUpdateinContact.jsx以便联系人行仅在更改时重新呈现?
  2. 我应该在哪里使用容器?感觉使用connectinContact.jsx可能不是最好的东西?
  3. 任何其他建议

这是要点的链接:https : //gist.github.com/heyogrady/4ba880c7ecffe18fdb70ad2d56e034cc

1个回答
  1. 更改Contact为 extend React.PureComponent,这是使用纯渲染的最新方法。文档

  2. 容器组件通常是带有业务逻辑的组件,而展示组件是带有纯视图逻辑的组件。Redux 通过该connect方法替代了容器组件这是样式问题,但很多时候将集合渲染到connect父级会更容易,然后映射项目并将它们提供给未连接到 Redux 的哑组件

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