反應CPU使用率（快速更新）

幾天前我在考慮在我的情況下使用反應。案件很簡單：我有對象的列表，它處理像上面例子中的快速更新：反應CPU使用率（快速更新）

var ListItem = React.createClass({ 
    render: function() { 
     return (
      <tr> 
       <td>{this.props.data.sign}</td> 
       <td>{this.props.data.a}</td> 
       <td>{this.props.data.b}</td> 
       <td>{this.props.data.time}</td> 
      </tr> 
     ); 
    } 
}); 

var List = React.createClass({ 
    getInitialState: function() { 
     return { items: list }; 
    }, 
    tick: function() { 
     var index = Math.floor(Math.random() * 100); 
     var randItem = getRandomItem(); 
     var item = this.state.items[index]; 

     item.sign = randItem.sign; 
     item.a = randItem.a; 
     item.b = randItem.b; 
     item.time = randItem.time; 

     this.setState({items: tick(this.state.items)}); 
    }, 
    componentDidMount: function() { 
     this.interval = setInterval(this.tick, 0); 
    }, 
    render: function() { 
     return (
      <table> 
       {this.state.items.map(function(item){ 
        return <ListItem key={item.i} data={item} />  
       })} 
      </table> 
     ); 
    } 
});

這是一個完整鏈接例子，我已經準備了：

https://jsfiddle.net/zsjmp3ph/

的問題是我的CPU佔用了大約25-30％的使用量。我已經在其他機器上測試過，它是一樣的。 React很正常嗎？在我看來，這很奇怪，但我在圖書館是全新的，所以我想問更多有經驗的人。告訴我，如果我做錯了什麼。提前致謝。

來源

2015-08-16 Donut

通過使用setInterval設置狀態，可以強制React經常重新渲染組件。它不會是0毫秒，而是由瀏覽器定義的一些下限。請參閱setInterval() behaviour with 0 milliseconds in JavaScript

如果您的應用程序已被人類使用，則在16ms內渲染UI的頻率不會超過一次。所以你需要對它進行批處理。

一個可能的解決辦法是https://github.com/petehunt/react-raf-batching

這將使整個反應批DOM變爲requestAnimationFrame。如果他們假定渲染最多不需要16ms，那麼這可能會制動其他組件。

更好的解決方案是從requestAnimationFrame回調中調用你的tick，實質上只是爲你的List使用這個優化，而不是爲你的整個應用。

來源

2015-08-16 10:18:23 Capaj

Good point Capaj！ 0ms（10ms）的間隔會產生頁面更新不切實際的情況。 requestAnimationFrame（）會有所幫助，但是如果頻率爲**，那麼我建議將它與setTimeout（）結合使用，以便將100ms週期內的所有更新推遲到單頁重繪。 – NicolaeS

感謝您的回覆:)對不起，但我沒有指定setInterval只是示例，但如果我將它改爲例如100，這與CPU的情況相同。在我的應用程序中，我通過websockets獲取數據，有時候我在很短的時間內（10-20毫秒）就獲得了大量的數據，所以它會產生問題。應用程序是基於角度的，我的ng-repeat會因此而瘋狂。

來源

2015-08-16 10:35:16 Donut

在這種情況下，您應該嘗試使用Angular。當您在ng-repeat表達式中使用'track by'時，ng-repeat的性能與React相當。您可以節省用戶下載另一個大型JS文件的開銷。請記住，最好是批量更改 - 當數據通過websocket從服務器返回時，不要執行作用域。$立即應用，而是執行RAF並執行scope。$在其回調中應用。這應該會更好。 – Capaj

反應CPU使用率（快速更新）

回答

相關問題