Angular 由一个bug说起之二：trackBy的一点注意事项

trackBy是angualr优化项目性能的一种方法, 通过返回一个具有绑定性的唯一值, 比如id，手机号，身份证号之类的，来让angular能够跟踪数组的项目，根据数据的变化来重新生成DOM, 这样就节约了性能。

但是如果是使用ngFor循环组件，添加trackBy的时候就需要注意这个组件自身的数据更新机制是否正常，因为没有使用trackBy的时候，for循环的数组数据改变了，angular会把数组里所有的项目都重新生成，那些项目的组件也都会重新初始化。

但当你使用了trackBy，数据发生了变化，angular只会把那些数据有变化的项目重新生成，这样项目的组件也不会重新初始化，如果这个组件的数据更新机制不够好，这时就会因为数据更新的问题，产生bug。

接下来我用一个例子来演示一下

这是子组件test

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnChanges {
    @Input() data: any;
    name: string;
    age: number;
    married: boolean;
 
    constructor() {
 
    }
 
    ngOnChanges(changes: SimpleChanges): void {
        if (changes.data?.currentValue) {
            this.init(changes.data?.currentValue);
        }
    }
 
    init(data) {
        this.name = data.name;
        this.age = data.age;
        this.married = this.married !== undefined ? this.married : data.married;
    }
}

<div>
    <div>姓名: {{ name }} div>
    <div>年龄: {{ age }}div>
    <div>婚否: {{ married ? '已婚' : '未婚' }}div>
div>

这是父组件app

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    itemArray = [
        {
            id: 1,
            data: {
                name: '张三',
                age: 24,
                married: true
            }
        },
        {
            id: 2,
            data: {
                name: '李四',
                age: 25,
                married: true
            }
        },
        {
            id: 1,
            data: {
                name: '王五',
                age: 26,
                married: false
            }
        },
    ];
 
    constructor() { }
 
    changeData() {
        this.itemArray = [
            {
                id: 1,
                data: {
                    name: '张三',
                    age: 24,
                    married: false
                }
            },
            {
                id: 2,
                data: {
                    name: '李四',
                    age: 25,
                    married: true
                }
            },
            {
                id: 1,
                data: {
                    name: '王五',
                    age: 26,
                    married: true
                }
            },
        ];
    }
 
}

<div>
    <div *ngFor="let item of itemArray;">
        <app-test [data]="item.data">app-test>
        ------------------------------
    div>
    <button (click)="changeData()">changeDatabutton>
div>

我在这里循环一个数组，显示人物的资料，姓名，年龄，婚否。

接下来我改变一下数据，调用一下changeData，把张三变成未婚，王五变成已婚

数据正常更新了，这是没有加trackBy的时候，现在添加一下trackBy

trackByFn(index: number, item: any) {
        return item.id;
    }

<div>
    <div *ngFor="let item of itemArray; trackBy: trackByFn;">
        <app-test [data]="item.data">app-test>
        ------------------------------
    div>
    <button (click)="changeData()">changeDatabutton>
div>
 

点击changeData

组件没有重新生成，数据也没有更新，这是因为test组件的更新机制有问题

他这里是以组件本身的数据为先，这样的话，即使上面传下来新数据，他也不会更新，除非重新初始化，而加个trackBy之后，组件就不会重新生成，所以没加trackBy之前，没有bug，加了就有bug。

所以，要使用trackBy，组件本身的数据更新机制要正常才行。