react-vs-pure-js

Benchmark created by Markus on

Preparation HTML

<script src="http://fb.me/react-0.8.0.min.js"></script>
<div id="foo"></div>

Setup

var total = 8;
    var data = [];
    var foo = document.getElementById("foo");
    
    for (var i = 0; i < total; i++) {
      data.push({
        key: i,
        label: 'label' + i
      });
    }
    
    var Item = React.createClass({
      render: function() {
        return React.DOM.li({
        }, React.DOM.span(null, [React.DOM.span(null, 'bla'), this.props.label]));
      }
    });
    
    var Hello = React.createClass({
      render: function() {
        return React.DOM.ul(null, this.props.items.map(function(item) {
          return Item({
            key: item.key,
            label: item.label
          });
        }));
      }
    });
    
    React.renderComponent(Hello({
      items: data
    }), foo);
    
    data[0].label = 'foo';

Test runner

Ready to run.

Testing in
TestOps/sec
React
React.renderComponent(Hello({
  items: data
}), foo);
ready
Pure JS
foo.innerHTML = '<ul>' + data.map(function(item) {
  return '<li class="fooBar"><span><span>bla</span>' + item.label + '</span></li>';
}).join('') + '</ul>';
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.