React JS Performance Test

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

<div id="grid"></div>

CSS

p {
  font: 12px/16px Arial;
  margin: 10px 10px 15px;    
}

button {
  font: bold 14px/14px Arial;  
  margin-left: 10px;
}

#grid {
  margin: 10px;   
}

.box-view {
  width: 20px; height: 20px;
  float: left;
  position: relative;
  margin: 8px;    
}

.box {
  border-radius: 100px;
  width: 20px; height: 10px;
  padding: 5px 0;
  color: #000;
  font: 10px/10px Arial;
  text-align: center;
  position: absolute;
}

JavaScript 1.7

/** @jsx React.DOM */

// Change N to change the number of drawn circles.

var N = 500;

var Box = React.createClass({
    render: function () {
        var divstyle = {
           top: this.props.box.top, 
           left: this.props.box.left,
           background: 'rgb(0,0,'+this.props.box.color+')'
         };
        return <div className="box" key={this.props.box.number} style={divstyle}>{this.props.box.number}</div>      
    }
});

var Animator = React.createClass({
    getInitialState: function() {
        var boxes = _.map(_.range(N), function(i) {
            return {top: 0, left: 0, number: i}
        })
        return {boxes: boxes}
    },
    doAnimate: function() {
      console.log("doAnimate");
      for (var i  = 0, l = this.state.boxes.length; i < l; i++) {
        this.state.boxes[i] = doTick(i);   
      }
      window.timeout = _.defer(this.doAnimate);
      this.setState({boxes: this.state.boxes});
    },

    render: function() {
        return (
            <div className=''>
              <button onClick={this.doAnimate}>Start</button>
            {
              this.state.boxes.map(function(box) {
                return <div className='box-view'><Box box={box} /></div>
               })
             }</div>
        )
    }

});


var count = 0;
var doTick = function(i) {
    count += 1;
    return {
            top: Math.sin(count / 10) * 10,
            left: Math.cos(count / 10) * 10,
            color: (count) % 255,
            content: count % 100,
            number: i
        }
};



window.timeout = null;
window.reset = function() {
  $('#grid').empty();
  clearTimeout(timeout);    
};


React.renderComponent(<Animator />, document.getElementById("grid"));