React with backbone (slow)

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone-react-component/0.6.2/backbone-react-component-min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var keys = 1
var changeComponent = React.createClass({
    mixins: [Backbone.React.Component.mixin],
    changeModel: function (event) {
        var value = event.target.value
        this.getModel().set("title", value)
    },
    render: function () {
        return <div>
            <div key={keys++}>
                <input type="text" value={this.getModel().get('title')} onChange={this.changeModel} />
                <br/>
            </div>
        </div>;
    }
});

var MyComponent = React.createClass({
    mixins: [Backbone.React.Component.mixin],
    handlePropsChange: function (event) {
        var value = event.target.value
        this.getModel().set("title", value)
    },
    clicked: function (event) {
        console.log(this.getModel())
    },
    getManyComponents: function () {
        var a = []
        for (var i = 0; i < 1000; i++) {
            a.push(<changeComponent/>)
        }
        return a
    },
    render: function () {
        return <div>
            <input type="text" value={this.props.title} onChange={this.handlePropsChange} />
            <button onClick={this.clicked} styleClass="btn">Print model</button>
            <br/>
            {this.getManyComponents()}
        props.title: {this.props.title}
        </div>;
    }
});

var model = new Backbone.Model();
var newComponent = new MyComponent({model: model});

model.set("title", "hello world")
 
React.renderComponent(newComponent, document.body);