当状态改变而没有突变时，Angular 会重新呈现组件列表

Question

我来自 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 中的完整示例。

任何人都可以解释为什么会发生这种情况，以及当我不改变状态时如何使列表不完全重新呈现？