Angular基础类型数组使用trackBy的必要性及实现方法咨询

1. 字符串数组场景使用trackBy是否有意义 #

有明确的使用意义，只要数组会定期动态更新，不管存储的是字符串还是对象，trackBy都能带来实际收益：

• 没有配置trackBy时，只要数组的引用发生变更（比如你重新赋值了一个新的数组实例），框架会把所有已渲染的列表项DOM全部销毁再重新渲染，哪怕数组内大部分内容和之前完全一致。
• 配置trackBy后，框架会基于你返回的唯一标识对比新旧数组的内容，仅对实际发生新增、删除、修改的项做DOM更新，大幅减少不必要的性能消耗，数组越长、列表项复杂度越高，收益越明显。

2. 不转换为带id的对象时的trackBy实现方案 #

不需要把字符串转成对象，直接用字符串本身（或结合索引）作为唯一标识返回即可，分两种情况处理：

数组内无重复字符串 #

如果你的业务场景能保证同一个数组里不会出现重复的字符串，直接返回字符串本身作为标识即可，以Angular为例：
模板代码：

<ul>
  <li *ngFor="let username of userList; trackBy: trackByString">
    {{ username }}
  </li>
</ul>

组件内trackBy函数：

trackByString(index: number, item: string): string {
  return item;
}

如果是Vue项目，逻辑完全一致，v-for的trackBy配置返回对应字符串即可。

数组内存在重复字符串 #

如果数组里可能出现相同的字符串，且重复的字符串代表不同的业务项，你可以把索引和字符串拼接起来作为唯一标识：

trackByString(index: number, item: string): string {
  return `${index}-${item}`;
}

提示：如果你的数组会频繁在非尾部位置插入、删除元素，数组项的索引会整体偏移，这种方式的标识稳定性会受影响，这种场景优先建议保证字符串值唯一，或者调整数据结构加唯一id。

内容的提问来源于stack exchange，提问作者Roghul