React SlowDOM
HTML
<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
JavaScript 1.7
/** @jsx React.DOM */
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);