几天前,我正在考虑在我的案例中使用 React。案例很简单:我有一个对象列表,它可以像上面的示例一样处理快速更新:
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 正常吗?在我看来,这很奇怪,但我是那个图书馆的新手,所以我想问问更有经验的人。如果我做错了什么,请告诉我。提前致谢。
最佳答案
通过使用 setInterval 设置状态,您可以强制 React 经常重新渲染组件。它不会是 0 毫秒,而是浏览器定义的某个下限。参见 setInterval() behaviour with 0 milliseconds in JavaScript
如果您的应用程序是供人类使用的,那么在 16 毫秒内渲染 UI 的频率就没有意义了。所以你需要对其进行批处理。
一个可能的解决方案是 https://github.com/petehunt/react-raf-batching
它会让整个react batch DOM变化到requestAnimationFrame。这可能会阻止您的其他组件,如果他们假设渲染最多不会花费 16 毫秒。
更好的解决方案是从 requestAnimationFrame 回调中调用您的 tick,本质上是仅针对您的 List 而不是针对您的整个应用使用此优化。
关于javascript - React CPU 使用率(快速更新),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32033794/