Reactは、1つのアイテムが変更されたときにリスト全体を再レンダリングする

Question

私は5000製品の名前と価格をレンダリングする簡単な反応アプリを持っています。価格は編集可能で、変更されると価格が州に反映されます。

https://github.com/TonyCaffer/thinking-in-react-1

App.js状態を管理し、ProductTableに渡されonChangePrice機能を経由して価格変動を、処理し、各ProductRowに

私は不変-ヘルパーを使用し、私は特に、変更された製品の状態レコードのみを変更します。

しかし、Reactがすべての製品を再レンダリングしているため、各変更ごとに1秒遅れがあります。各製品には、Reactが必要なコンポーネントだけを再レンダリングするのに役立つと思った重要な特性があります。

プロダクションビルドではそれほど時間はかかりませんが、すべてのプロダクトが再レンダリングされます。これは私が修正しようとしている根本的な問題です。

なぜすべての製品コンポーネントが再レンダリングされますか？これは、高レベルのProductTableを通じてthis.state.productsを渡すので、リストの再描画がトリガーされるからですか？もしそうなら、各ProductRowは、状態がリストにあるときに、どのようにして自身のレコードの状態を管理できますか？

Answer 1

リアクションスケジュールは、調整フェーズ（または、私たちが定義するコンポーネントのレンダリング方法を含むのでレンダリングフェーズ）とコミットフェーズの2段階で更新されます。状態が更新されると、Reactは何に関係なく更新プロセスを開始します。それはあなたの子コンポーネントに

考えられる解決策を更新の回数を減らすことができ、適切なshouldComponentUpdateの使用である。このように見えること、ProductRowためshouldComponentUpdateを使用します。

shouldComponentUpdate(nextProps) { 
    if (
    this.props.guid !== nextProps.guid 
    || // similarly check if the other new props are different 
) { 
    return true; 
    } 
    return false 
} 

上記のチェックは確認します親がsetStateを検出し、新しいReact Fiberのワークループで更新をスケジュールするとき、子コンポーネントの再計算は行われず、コミットフェーズはDOM更新をすべてスキップします。

Lin Clark explains the two phases React Fiberがどのようにアップデートを管理しているかを理解するのに役立ちます。

非常に長いリストで知覚されたperfを改善するために、React Virtualisedを調べることができます。