react-vs-pure-js (v12)

Revision 12 of this benchmark created on

Preparation HTML

<script src="http://fb.me/react-0.10.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({
            class: 'fooBar'
          },
          React.DOM.span(
            null, 
            [React.DOM.span(null, 'bla'), this.props.label]
          )
        );
      }
    });
    
    var List = React.createClass({
      render: function() {
        var li = function(item) {
          return Item({
            label: item.label
          });
        };
        return React.DOM.ul(null, this.props.items.map(li));
      }
    });

Test runner

Ready to run.

Testing in
TestOps/sec
React
React.renderComponent(List({
  items: data.reduce(function (result, item) {
    item.label = item.label.split("").reverse().join("")
    return result;
  }),
}), foo);
ready
Pure JS
foo.innerHTML = '<ul>' + data.map(function(item) {
  item.label = item.label.split("").reverse().join("")
  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.