子コンポーネントの潜在的なパフォーマンスの問題を解決する方法

Question

複数の行を選択できる複数選択可能なテーブルを作成しました。ただし、現在のマーキング（チェックされているかどうかに関係なく）をチェックするには、以下のことを行う必要があります。 tableコンポーネント内部

は、JavaScriptファイルtable-rowインサイド

{{#each rows as |row index|}} 
    {{table-x-row 
     row=row 
     index=index 
     data=data 
     selected=(mut selected) 
     maxSelectionCount=maxSelectionCount 
    }} 
    {{/each}} 

、

classNameBindings: ['isSelected:selected'], 

    isSelected: computed('selected.[]', { 
    get() { 
     const index = this.get('index'); 
     const row = this.get('data.rows')[index]; 
     return this.get('selected').includes(row); 
    } 
    }), 

上記のコードは、私が10を持っている場合を意味するたびに、選択リストの変更を加えたすべてのtable-rowコンポーネント用のトリガー行。計算されたプロパティは回呼び出されます。

このパフォーマンスの問題を解決するためのご提案はありますか？

Answer 1

私は、テーブルと行を簡略化することで、twiddleで述べたケースをシミュレートしようとしました（実際のテーブルと行ではなく、ケースを説明するためのダミーコンポーネントです）。あなたが言及したように計算されたプロパティtable-x-rowはすべての行について計算されています。これは、パフォーマンスとデータカプセル化の両方で問題があります。 selectedの配列table-xをすべての行でデータカプセル化に渡します。個々の行が他の行の選択状態を知る必要があるのはなぜですか（私はselectedという表の属性を意味します）？

計算された配列プロパティをtable-xに作成し、isSelectedの情報を次のような行に直接渡すことができないようにするには、twiddle。このようにして、 table-xで定義された計算されたプロパティrowsWithSelectionInfoは、実際のrowsが変更された場合にのみ変更されます。行の選択が変更されたときには何も再計算されません。個々の行にはそれぞれisSelectedプロパティが個別に渡されるため、テーブルの全データまたは選択情報全体については認識されません。