Question

在此代码中，printWasted在点击Wasted time按钮时打印add。

var App = React.createClass({
    getInitialState: function() {
        return {
            count: 10
        };
    },
    onClick: function() {
        Perf.start();
        this.setState({count: this.state.count + 1}, function() {
            setTimeout(function() {
                Perf.stop();
                Perf.printWasted();
                Perf.printDOM();
            }, 0);
        });
    },
    render: function() {
        var messages = [];
        for (var i = this.state.count; i > 0; --i) {
            messages.push({id: i, body: 'message:' + i});
        }
        return (
            <div>
                <button onClick={this.onClick}>add</button>
                <div>
                    {messages.map(function(message, index) { return <Message key={index} message={message.body} />})}
                </div>
            </div>
        );
    }
});
var Message = React.createClass({
    componentWillMount: function() {
        for (var i = 0; i < 1000000; ++i) {}
    },
    render: function() {
        return (
            <div>{this.props.message}</div>
        );
    }
});

https://jsfiddle.net/koba04/0xnLdh7j/1/

(index) Owner > component Wasted time (ms) Instances
0   "App > Message" 1.3059999982942827  1

result of printWasted

我认为printWasted只打印那些实际上没有呈现任何内容的组件。

在此代码中，根据printDOM的结果，似乎所有Message组件都会改变DOM。

为什么printWasted会打印Wasted time？这是Wasted time是什么？

Answer 1

此行为已在v0.14中修复。

相关的拉取请求是这样的。 https://github.com/facebook/react/pull/4683

在v0.14中，没有Wasted time。

https://jsfiddle.net/koba04/4xozxrj7/

var Perf = React.addons.Perf;
var App = React.createClass({
    getInitialState: function() {
        return {
            count: 10
        };
    },
    onClick: function() {
        Perf.start();
        this.setState({count: this.state.count + 1}, function() {
            setTimeout(function() {
                Perf.stop();
                Perf.printWasted();
                Perf.printDOM();
            }, 0);
        });
    },
    render: function() {
        var messages = [];
        for (var i = this.state.count; i > 0; --i) {
            messages.push({id: i, body: 'message:' + i});
        }
        return (
            <div>
                <button onClick={this.onClick}>add</button>
                <div>
                    {messages.map(function(message, index) { return <Message key={index} message={message.body} />})}
                </div>
            </div>
        );
    }
});

var Message = React.createClass({
    componentWillMount: function() {
        for (var i = 0; i < 1000000; ++i) {}
    },
    render: function() {
        return (
            <div>{this.props.message}</div>
        );
    }
});

ReactDOM.render(<App />, document.getElementById('container'));

Answer 2

React文档说printWasted打印了那些没有更改渲染树的组件所花费的时间 - 即重新渲染它们是浪费时间。

“浪费时间＆＃34;由React.addons.Perf.printWasted显示

2 个答案: