React + redux、コンポーネントの配列。この配列から変更されたコンポーネントだけを再レンダリングする方法は？

Question

例えば、ページiには、多くのコンポーネント、多くのコンポーネントの配列があります。 いくつかのアクションをディスパッチすると、このコンポーネントのすべての配列を持つページ全体が再レンダリングされます。 しかし、私はページ上の変更されたアイテム/コンポーネントを再レンダリングする必要はありません。 変更されたコンポーネントのみを再レンダリングします。私はshouldComponentUpdate（）があることを知っています。しかし、すべてのコンポーネントにshouldComponentUpdateをロジックを書くことはそれほどクールではありません。おそらく、これにはいくつかのライブラリがありますか、あるいはいくつかの方法がありますか？私はreactjs/reselectについて聞いたことがありますか、そのような問題のために正しいことです、または私が誤解した場合は、再選択の略号を教えてください？機能コンポーネントを使用する場合はどうなりますか？

おそらく、パフォーマンスを最適化し、再構築を許可するコンポーネントを制御するための別のライブラリがありますか？

また、https://github.com/seatgeek/react-infinitehttps://github.com/bvaughn/react-virtualizedも見つかりました。これらの2つのライブラリを同じ目的で使用しますか？違いは何ですか？どちらを選択するのですか？

簡単な質問ですが、データをフェッチしていると仮定して配列に追加しています。 新しい項目を取得するたびに、配列全体ではなく、追加された項目だけをレンダリングする方法はありますか？

Answer 1

はい、正しいです。
再選択を調べることをお勧めします。
再選択すると、データをメモして、アプリケーションの特定の部分で使用されているストアの部分だけを選択できます。
セレクタを使用すると、ライブラリの選択された部分が変更された場合にライブラリが再レンダリングされます。ただし、店舗の一部が変更されても、必要なデータには接続されていなくても機能しません。

Answer 2

彼の素晴らしいライブラリを再選択してください。これが必要なものです。唯一の欠点は、多くのコンポーネントでセレクタを使用する場合です。プライベートにするために各セレクタのインスタンスを持つ必要があります。ここに示すように、makeMapStateToProps関数を作ることで簡単に行うことができますhttps://github.com/reactjs/reselect#sharing-selectors-with-props-across-multiple-components。しかし、私は必要なすべてのセレクターのためにそれを作るのが好きではありません。だから私はこの最後のものの延長であるこの図書館を見つけるhttps://github.com/toomuchdesign/re-reselect。これは同じセレクタを実行しますが、キャッシングにはキーを使用できます。