angular - Angular2如何决定是否更新或重新创建组件？

Question

假设我有一个 Angular2 组件，它有一些输入属性，例如

@Component(...)
class ChildComponent {
   @Input() input1: string;
   @Input() input2: number;
   internalState: any;
}

它在另一个组件中使用，甚至可能在列表中，例如:

<li *ngFor="#item of items">
  <child-component [input1]="item.a" [input2]="item.b">
  </child-component>
</li>

输入参数发生变化的地方:

Angular2 如何决定是否应更新子组件(将输入变量设置为新值并调用 ngOnChanges 生命周期钩子(Hook))，或者是否应销毁子组件并创建新组件？是否有可能影响行为？

我之所以问这个问题，是因为如果组件除了输入参数之外还有任何内部状态，那么更新或重新创建它就会产生影响。在更新的情况下，它将保留旧的内部状态(例如，如果某些内容折叠，如果用户输入某些内容)，在重新创建的情况下，我们将获得一个具有默认状态的新初始化组件。

根据组件的不同，我肯定有时需要第一种方法，有时需要另一种方法。

如果组件具有一些复杂的初始化逻辑并且不存储用户数据，那么我认为将输入视为不可变并且仅在 ngOnInit 中初始化一次组件会更容易，而不是考虑需要在 ngOnChanges 上做什么.

当存在像给定示例中那样的子组件列表时，问题变得更加棘手。如果为我提供列表的服务现在在列表中间插入一个新项目并给我一个更新的列表(可以是不可变列表的突变版本或新版本) - Angular2 如何知道我想要一个新的要在列表中间创建项目，而不是用新值更新现有项目并在最后创建新项目？后一种方法会将先前现有项目的内部状态转移到新项目，并且先前现有项目的输入数据将分配给新创建的组件。

Answer 1

引自NgFor docs :

Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM. This has important implications for animations and any stateful controls (such as <input> elements which accept user input) that are present. Inserted rows can be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such as user input.

文档中还有一些您可能需要阅读的其他详细信息。