title: setState vs refs in react.js
body: <p>I created tabs in react and and now on click I have to change the class of the tabs the tabs classes may be as follows:</p>
  
  <p>1:active<br>
  2:previousActive<br>
  3:alreadySelected</p>
  
  <p>On click of a tab class become <code>active</code> and check whether it is selected before or not using <code>alreadySelected</code> class and <code>active</code> class from the last active tab is remove and if it is not <code>alreadySelected</code> then add <code>alreadySelected</code>.</p>
  
  <p>Code of one tab in react:</p>
  
  <pre><code>var TabBody = React.createClass({
      getInitialState: function() {
          return {
              class: 'tabBody tab activeTab'
          }
      },
      render: function() {
          a.tabBody = this;
          return (React.createElement('div', {
              className: this.state.class,
              ref: 'body',
              onClick: handleTabClick
          },
          React.createElement('span', {}, "Body"))
          );
        }
  });
  </code></pre>
  
  <p>In order to change the class of the tabs I am doing in two ways and want to know which is effective. Code style one:</p>
  
  <pre><code> var bodyClass = (a.tabBody.state.class).split(' ');
   var sleeveClass = (a.tabSleeve.state.class).split(' ');
   var neckClass = (a.tabNeck.state.class).split(' ');
   if (data === 'tabBody') {
       bodyClass.push('activeTab');
       var str1 = program.arrayToString(bodyClass);
       Interfaces.tabBody.setState({
           class: str1
       });
   }
  </code></pre>
  
  <p>Code Style 2</p>
  
  <pre class="lang-js prettyprint-override"><code>a.tabBody.refs.body.classList.remove('activeTab');
  a.tabBody.refs.body.classList.add('tabPreviewComplete');
  a.tabSleeve.refs.body.classList.add('activeTab');
  </code></pre>
  
  <p>Which style is good for doing this and why?</p>