ブラウザの応答性を維持するためのshouldComponentUpdateのインテリジェントな使用

Question

私は大量のデータを取得するリアルタイムアプリケーションを持っています。その結果、多くのデータを渡すと、ブラウザが応答しなくなります。私はPromises、またはRxを使用して研究していますが、これらは私がこの時点でコミットしたいよりも多くの手術を伴うようです。

私はこの目的のためにshouldComponentUpdateを読むことができます。

var HomePage = React.createClass({ 
    getInitialState: function() { 
     var stocks = {}; 

     feed.onChange(function(stock) { 

      stocks[stock.symbol] = stock; 
      this.setState({stocks: stocks, bid: stock, ask: stock, last: stock, type: stock, undsymbol: stock}); 
     }.bind(this)); 

     return { 
      stocks: stocks    
     }; 
    }, 
    componentDidMount() {    
     var props = this.props; 

    }, 
    shouldComponentUpdate(nextProps, nextState) { 
     // What code would go in here to render 
     // all changes, say every 1 second only? 
    }, 
    etc... 
} 

Answer 1

可能：何が内部shouldComponentUpdateのようなコードを見てしまう[私が探していますおそらく何でスマート]と1秒に1回は可能更新するために、それを使用して言うのでしょうか？はい。ベストプラクティス？おそらくそうではありません。

shouldComponentUpdateは、新しい更新/レンダリングサイクルを実行する場合はtrue、そうでない場合はfalseを返す必要があります。 shouldComponentUpdateを使用してレンダリングを絞る

一つの方法は、タイムスタンプの比較を行うことです。

shouldComponentUpdate() { 
    const now = Date.now(); 

    if (!this.lastUpdated || now - this.lastUpdated > 1000) { 
    this.lastUpdated = now; 

    return true; 
    } 

    return false; 
}