Reactjs与えられたアプリで膨大な数のオブジェクトをベストプラクティス

Question

をフィルタリングすると、100,000+オブジェクトを保持する配列があると言えます。

オブジェクトが

let collection = [{ 
    name:'name', 
    price: 10, 
    group_id: 1 
}, 
{ 
    name:'name 2', 
    price: 8, 
    group_id: 2 
}, 
]; 

を次のようになり、今私はすべての10万オブジェクトを表示するビューを持っており、ユーザーは価格帯やGROUP_IDによってリストをフィルタリングすることができます言うことができます。

- このようなリストは、リモートjsonからロードされた静的リスト、または還元された保存されたコレクションであることができます。

価格が&のグループフィルタを使用してこのフィルタをフィルタリングする最適な方法は何ですか？

私の最初の考えは、親コンポーネントの状態で "filtered_list"と呼ばれる別の配列を保持することでした。フィルタの変更があった場合、filtered_listは親Collection（100,000+オブジェクトを再度ループ）をフィルタリングして再構成します。

が、これはそれほどパフォーマンスではないに見えるので、私は新しいフィルタがすでにfiltered_listまたは使用親にcollection

例を使用する必要がある場合deciedいくつかのロジックを記述する必要がありかもしれ考慮してください - group_filter = 1 GROUP_IDれた場合は、 group_1が2から変更された場合、filtered_listにはgroup_id = 2の項目が含まれていないため、大きなコレクション全体をリフィルする必要があるため、filters_1をフィルタリングする必要があります。 、そのコレクションのみ...

これは私に別の問題をもたらす。どこで私はfiltered_list variablを維持すべきですか？ e？

これをreduxストアに追加した場合、これはreduxの主張に違反し、そのストアはデータの作成に必要な情報のみを保持し、計算されたデータは保持しません。

私が得たデータを計算するためReduxのドキュメントで推奨されて再選択のライブラリを使用してきた

const App = props =><div> 
<aside> 
<Filtes /> 
</aside> 
<article> 
    {props.collection.map(item=><label>item.name</label>)} 
</article> 
</div> 

export default connect(({collection})=>({collection}))(App) 

Answer 1

：

再選択は、メモ化、構成可能 セレクタ関数を作成するためのシンプルなライブラリです。再選択セレクタを使用して、 をReduxストアから派生データを効率的に計算することができます。セレクタが、それはときにのみ、選択のgroupIdの変更を再計算されますメモ化されているので

const getGroupdId= state => state.selectedGroupId 
const getIteams = state => state.collection 

const getVisibleItems= createSelector(
    [getItems, getGroupId], 
    (items, groupId) => 
    items.filter(i=> i.group_id === groupId) 
) 

：

http://redux.js.org/docs/recipes/ComputingDerivedData.html

だからあなたは、このような何かを見てセレクタを持つことができます。また、過去のImmutableJS状態での再選択も組み合わせました。私の経験では、大規模なデータ構造を照会するときのパフォーマンスが向上しました。