如何处理反应中的大量项目列表的呈现？

Question

我有一个大的项目列表，以渲染和列表数据得到实时更新的套接字-io。如何处理性能问题？它得到了大量的更新，并且呈现了很多次的项表。

Answer 1

有几件事需要考虑：

1. 大列表的渲染成本
2. 更新项目

对于#1，您可以尝试使用窗口库(如反应虚拟化 )，这将使DOM的负担减轻得多，而不是呈现数千项，实际上只呈现了几十个条目。

对于#2，请确保当项更新时，只更新该项，而不更新列表。您可以使用备忘录来确保列表项只有在它们的道具更改时才会再次呈现。

Answer 2

我在同一条船上，通过在组件中实现shouldComponentUpdate生命周期方法，以不同的方式解决了我的问题：

shouldComponentUpdate(nextProps) {
  // Note: lodash's "isEqual" method is useful for performing a deep comparison
  // of the given objects, which is more than JavaScript can do natively:
  return !_.isEqual(this.props.listItems, nextProps.listItems);
}

这也许是一个更好的整体解决方案，因为：

• 实现起来更容易(即:不必将现有组件封装在React.memo() 特制中)
• 它甚至在没有“备忘”(即:2018年发布的16.6.0以上版本)的早期版本中也得到了支持。