避免在不可变数据更改时重新创建组件

Question

我做了一个用来说明问题的数字（这些数字非常高，可以正确地说明问题，因为它发生在每个行内有更多数据的小数据集中。）

https://plnkr.co/edit/YVaFZ7mACeQErLJuIFpZ?p=preview

里面有这个简单的功能：

populateArray(){
    const newArray = [];
    const start = Date.now();
    for(const i = 0; i < 100000; i++){
      newArray.push({name: 'item ' + i, data: 'data'+i});
    }
    this.array = newArray;
    this.timer = Date.now() - start;
  }

当你点击按钮时，生成数组需要大约35ms，并且页面会冻结更长的时间，这是逻辑，因为你正在创建大量的dom组件。

现在的问题是当你再次点击它时，页面会再次冻结，因为它会重新创建所有组件，因为数组是不可变的，所提供的是一个全新的。

由于Observable发出的数据不可变，因此无法避免不可变状态。

话虽如此，如何改善这类问题的表现？因为在我的生产案例中，数据更改不是很大，您可以假设返回的数据的90％是相同的，因此大多数情况下不需要再次创建组件。

Answer 1

通常，您不应该显示/创建这么多元素。您的用户应该如何一次查看/使用所有100k元素？想想更好的用户界面，添加过滤器或其他东西。

解决此问题的另一种技术是所谓的“虚拟滚动”或“窗口化”。想法是您只显示/计算当前可见的内容。以下是一些基于此的库：

• angular2-virtual-scroll
• react-virtualized