javascript - React CPU 使用率(快速更新)

Question

几天前，我正在考虑在我的案例中使用 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 正常吗？在我看来，这很奇怪，但我是那个图书馆的新手，所以我想问问更有经验的人。如果我做错了什么，请告诉我。提前致谢。

Answer 1

通过使用 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 而不是针对您的整个应用使用此优化。