どのように状態の変化ごとに反応コンポーネントを更新しないのですか？

Question

ReduxとサーバーへのWebsocket接続を使用してデータを取得します。データの量は約200k行で、私のアプリにWebsocketメッセージとして1つずつ送られます。行が来たら、私はReduxでそれを保存したいと思います。私はこれを行う方法を知っていて、うまくいきます。

私が予期している問題は、単一の行が状態に追加されるたびにビューを更新したくないということです。

アイデアは、たとえば10秒ごとにビューの更新をデバウンスすることです。または、10k行ごとに表示することもできます。

正しく動作させるにはどうすればよいですか？私は詳細な技術的解決策ではなく、説明された概念にもっと興味を持っています。

ありがとうございます！

Answer 1

状態の変更時にコンポーネントのshouldComponentUpdateを使用して再レンダリングを拒否することができます。このような何か -

class MyComponent extends React.Component { 
    shouldComponentUpdate(nextProps, nextState) { 
    // only re-render when you have data worth 10x rows 
    return nextState.arrayOfRows % 10 === 0; 
    } 

    render() { 
    // render logic here 
    } 
} 

Answer 2

1つのオプションは、@RaghudevanShankar's answerのようなshouldComponentUpdateを更新したりすべきではないコンポーネントを制御することです。

また、redux状態を定期的に更新することもできます。たとえば、すべてのメッセージ/行にレコードを追加するのではなく、それらをバッチに結合して、行データの配列でアクションを実行することができます。