1

我来自 React，我已经使用 Angular 工作了几个月了。React 组件在重新渲染时只更新必要的 HTML，而 Angular 组件似乎在状态未发生变化时完全重新渲染。如果我直接改变状态似乎工作得很好。

这是我非常基本的示例：

我有保持状态的主要组件：

items = [{ name: "John", age: 8 }, { name: "Jane", age: 20 }];

并在其视图中呈现项目列表：

<item *ngFor="let item of items" [item]="item"></item>

项目组件如下所示：

@Component({
  selector: "item",
  template: `
    <p>
      {{ item.name }}, {{ item.age }}
      <input type="checkbox" />
    </p>
  `
})
export class ItemComponent {
  @Input() item: any;
}

我在 item 组件中添加了该复选框，只是为了注意组件何时完全重新渲染。

所以我要做的是勾选复选框并age为该州的每个用户增加。

如果我通过改变状态来增加它，视图会按预期更新并且复选框保持选中状态：

this.items.forEach(item => {
  item.age++;
});

但是，如果我在age不直接改变状态的情况下更改了整个列表，则将重新呈现整个列表，并且不再选中该复选框：

this.items = this.items.map(item => ({
  ...item,
  age: item.age + 1
}));

这是CodeSandbox中的完整示例。

谁能解释为什么会发生这种情况，当我不改变状态时，如何使列表不完全重新渲染？

4

1 回答 1

4

Angular 用来渲染项目列表的NgForOf指令检查我们传递给它的数组是否有任何变化。

如果你改变项目中的属性，那么 Angular 就知道没有变化，因为对数组中对象的引用保持不变。

另一方面，如果你用新的对象完全替换了前一个对象，那么 ngForOf 将重新渲染该对象。

要确定对象是否更改 ngForOf 指令，请使用 DefaultIterableDiffer 来查看我们提供的 trackByFn 函数。如果我们不提供它，那么默认函数如下所示：

var trackByIdentity = function (index, item) { 
  return item;
};

然后 Angular将此函数的结果与集合中的先前值进行比较。

trackByFn你可以像key在 React 中那样思考。

因此，您的解决方案可能如下所示：

*ngFor="let item of items; trackBy: trackByFn"

trackByFn(i) {
    return i;
}

https://codesandbox.io/s/angular-67vo6

于 2019-05-26T13:37:06.220 回答