React tab vs jQuery tab (v2)

Revision 2 of this benchmark created on August 4, 2014

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react-with-addons.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<style>
  .hide {
    display: none;
  }
  .active {
    background: pink;
  }
  li {
    display: inline;
    margin: 20px;
    border: 1px solid pink;
  }
</style>



  <h3>React tab</h3>
  <div id='target'></div>
  <h3>jQuery tab</h3>
  <div id='tabs'>
    <ul>
      <li data-target='#1'>Tab 1</li>
      <li data-target='#2'>Tab 2</li>
      <li data-target='#3'>Tab 3</li>
    </ul>
    <div id='1'>
      content 1
    </div>
    <div id='2'>
      content 2
    </div>
    <div id='3'>
      content 3
    </div>
  </div>

<script>
/** @jsx React.DOM */
var CloneWithProps = React.addons.cloneWithProps
  , CX = React.addons.classSet;

var TabPane = React.createClass({
  head: function() {
    return this.props.children[0];
  },
  render: function() {
    return (
      <li>{this.props.children}</li>
    );
  }
});

var Tab = React.createClass({
  getInitialState: function() {
    return {
      activeKey: this.props.defaultActiveKey
    };
  },
  handleHeadClick: function(key, e) {
    console.log('You selected tab ', key);
    this.setState({activeKey: key});
  },
  renderHeads: function() {
    var _this = this;
    return React.Children.map(this.props.children, function(child) {
      return CloneWithProps(child.props.children.filter(function(i){return i.constructor.displayName == TabHead.displayName})[0], {
        key: child.props.key,
        activeKey: _this.state.activeKey,
        handleHeadClick: _this.handleHeadClick
      });
    });
  },
  renderContents: function() {
    var _this = this;
    return React.Children.map(this.props.children, function(child) {
      return CloneWithProps(child.props.children.filter(function(i){return i.constructor.displayName == TabContent.displayName})[0], {
        activeKey: _this.state.activeKey,
        key: child.props.key
      });
    });
  },
  render: function() {
    return (
      <div className='widget-tab'>
        <ul className='widget-tab-head clearfix'>
          {this.renderHeads()}
        </ul>
        <div className='widget-tab-content'>
          {this.renderContents()}
        </div>
      </div>
    );
  }
});

var TabHead = React.createClass({
  onClick: function(key) {
    // Do nothing if tab already active
    if(this.props.activeKey == key) return;
    this.props.handleHeadClick(key);
  },
  render: function() {
    var classes = CX({
      'active': this.props.key == this.props.activeKey,
      'ui-switchable': true
    });
    return (
      <li key={this.props.key} className={classes} onClick={this.onClick.bind(this, this.props.key)}>
        {this.props.children}
      </li>
    );
  }
});

var TabContent = React.createClass({
  render: function() {
    var classes = CX({
      'show': this.props.key == this.props.activeKey,
      'hide': this.props.key != this.props.activeKey,
      'widget-tab-content': true
    });
    return (
      <div className={classes} id={'tab-' + this.props.key}>
        {this.props.children}
      </div>
    );
  }
});

React.renderComponent((
  <Tab defaultActiveKey='a'>
    <TabPane key={'a'}>
      <TabHead> head 1 </TabHead>
      <TabContent> react </TabContent>
    </TabPane>
    <TabPane key={'b'}>
      <TabHead> head 2 </TabHead>
      <TabContent> backbone </TabContent>
    </TabPane>
    <TabPane key={3}>
      <TabHead> head 3 </TabHead>
      <TabContent> angular </TabContent>
    </TabPane>
  </Tab>
), document.getElementById('target'));

// jquery
    $('#tabs').on('click', 'li', function(e) {
      $(this).addClass('active');
      $(this).siblings().removeClass('active');
      $($(this).attr('data-target')).removeClass('hide');
      $($(this).attr('data-target')).siblings('div').addClass('hide');
    });
    $('#tabs li:first').click();


// counter
var i = 0;
function getNextCount() {
  i++;
  return i % 3;
}
</script>

Test runner

document.getElementsByTagName('ul')[0].children[getNextCount()].click();

document.getElementsByTagName('ul')[1].children[getNextCount()].click();

Revisions

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

• Revision 1: published by React tab vs jQuery tab on August 4, 2014
• Revision 2: published on August 4, 2014