ReactJS与AngularJS的表现

Question

我正在评估react.js,与angular.js相比,它看起来很慢

这是使用React的1000个输入字段的问题:

var Message = React.createClass({
    render: function () {
        return this.transferPropsTo(
            <input type="text" value={this.props.text} onChange={this.props.callback}/>)
    }
});

var MessagesApp = React.createClass({
    getInitialState: function () {
        return { text: "hello"}
    },
    textChange: function (event) {
        this.setState({text: event.target.value})
    },
    createDom: function () {
        var dom = []
        for (var i = 0; i < 1000; i++) {
            dom.push(<li>
                <Message key={i} text={this.state.text} callback={this.textChange} />
            </li>)
        }
        return dom
    },
    render: function () {
        return (<ul>
               {this.createDom()}
        </ul>)
    }
});


React.renderComponent(<MessagesApp/>, document.body);

这与AngularJS相同:

而这一个与Backbone + React:

有没有办法提高React性能？

Answer 1

在我的使用Chrome 35的机器上,这两个示例彼此相同 - 使用时间轴视图,React和Angular示例都需要~110 ms来响应按键.Backbone在~270 ms时占用两倍的时间.

另请注意,在基准测试时(以及在生产应用程序中),您应该使用React的预缩小版本.更多信息:

http://facebook.github.io/react/downloads.html

开发版本有额外的警告,可以帮助您在代码中发现问题 - 生产版本已经剥离了,因此速度更快.