角度 - trackByを実装するポイントは何ですか？

Question

最近、すべての* ngForでtrackBy関数が実装されていないときに、Angularスタイルのガイドラインlint-extender "Codelyzer"が警告を投げています。なぜこれが問題とみなされているのだろうと私は思っています。

• このblogでは、trackByの実装例はtrackByFn(index, item) { return index;} // or item.idになりました。私がindexからitem.idに切り替えた場合、これはどのように私のアプリをより速くするでしょうか？配列の挿入や削除に関しては、インデックスは最も重要な要素です。代わりに[ngFor]ディレクティブでオブジェクトID値を比較する必要がありますか？
• モジュールのng_for_of.d.tsには、_trackByFnがあります。だから私は、return index -trackByは、とにかくデフォルトの設定だと思いますか？それで、それを明示的に実装するのはなぜ良い習慣と考えられるのですか？

私は個人的には、私のアプリで大きなコレクション（配列）を持っていて、それはreduxストアにあります。それだけで空の配列に置き換えることができたり、新しいアイテムは例えば、それに追加されますすることができます

return {...state, myArray: [...state.myArray, ...newItems]}）は、

決してが移動または削除します。 indexの代わりにitem.idで追跡するのは意味がありますか？ * ngForですべてのコンポーネントに実際にreturn index;関数を実装する必要がありますか？

Answer 1

*ngForは、オブジェクトアイデンティティによって項目を追跡し、更新前の配列内の配列内の項目の反復配列が更新されたときに、要素の再レンダリングを回避しようとします。

配列にプリミティブ値（文字列、ブール値、数値）が含まれている場合、*ngForは変更後にそれらを識別できません。値は、値が変わってしまうと*ngForが緩んでしまうため、各キーボード入力後にレンダリング<input>に変更されweired行動を引き起こす

items = ['foo', 'bar', 'baz']; 

<input *ngFor="let item of items" [(ngModel)]="item"> 

のような文字列のリストの上に

*ngForアイテムが以前にレンダリングされた場所を追跡し、変更前の値の入力を削除し、変更後の値に追加します。これにより、入力がフォーカスを失い、入力の位置が変わる可能性があります。

これを修正するには、*ngForに身元ではなくインデックスで追跡するように指示することができます。あなたはidプロパティで項目を追跡する*ngForをしたい場合は

も参照してください

• *ngFor Behaviour on primitive data type
• Angular2 NgFor inside tree model: wrong order when remove and then add elements

はまた、オブジェクトのためには、例えば、便利です。 たとえば、不変の値が使用され、リストの項目が変更された場合（つまり、idプロパティで同じ値を持つ新しいオブジェクトインスタンスに置き換えられたが、他の一部のプロパティが変更された場合など）*ngForをidで追跡するよう指示すると、そのアイテムは削除されずにDOMに再追加されます。

*ngForまた、修正された項目を正しく認識しないと、このPlunker example（How can I animate *ngFor in angular 2?）に示すようなアニメーションが壊れることがあります（あまりにも頻繁にアニメーション化されます）。