私はアイテムのリストを持っています。 このリストでテーブルコンポーネントをレンダリングします。 各行にチェックボックスを追加したいとします。 テーブル全体をレンダリングせずにチェックして現在の行スタイルを設定するには、テーブル行iteselfに別のコンポーネントを使用する必要がありますか？ これで、アイテムの 'selected'プロパティを変更すると、テーブル全体がレンダリングされます。テーブル行アクションのための反復的なベストプラクティス
感謝:)
あなたのテーブル全体が再レンダリングする場合は、あなたが明確にそれを避けるために、あなたのコードを更新する必要があります。あなたが言ったように、あなたは行ごとにコンポーネントを持つことができますので、行の更新時には、行だけが再レンダリングされます。私は強くこれを行うことをお勧めします。パフォーマンスの低下を避けるために、各行にキーの小道具を必ず含めてください。 shouldComponentUpdateメソッドを使用して、無駄な再レンダリングを避けることもできます。小道具をテーブルコンポーネントから行コンポーネントに渡すときは、通過するオブジェクトが一意であることを確認してください。あまり頻繁に変更しないでください。この後、行が頻繁に更新され、再レンダリングされることがわかった場合は、react-virtualizedを試してみてください。このライブラリは画面に表示されている行のみをレンダリングします。さらに助けが必要な場合は、いくつかのコードを共有することもできます。
これでもっと明確になりました:)私の2番目の質問は、選択操作の実行方法です。選択した状態を各項目のプロパティとして保存するか、選択した項目のリストを保存する必要がありますか？ – user3712353
選択した行に簡単にアクセスしたい場合は、各項目に値を保存しないようにしてください。また、アプリ内のどこか別の場所に必要と思われる場合はredux状態に保存するか、状態。行が選択されているか、行コンポーネントの小道具として渡されているかを渡すことができます。 –
リアクションにスマートなレンダリングがあるので、パフォーマンスは心配しません。コンポーネントを分割する方法の正しい方法はありません。私にとっては、行が別のコンポーネントになるのは自然なことです。 – disstruct
実際に私はパフォーマンスの問題があるので、この質問をします。私はテーブルのアイテムのリストをレンダリングし、各行を選択することによって、アイテムの選択プロパティを変更するアクションをディスパッチします。しかし、200行以上を表示すると、非常に遅くなります。行自体に別のコンポーネントを使用していないためです。 – user3712353