reactState vs refs in react.js

Question

我在react中创建了选项卡,现在单击我必须更改选项卡类的选项卡类,如下所示:

1:活动
2:previousActive
3:已选中

单击选项卡类后active,检查它是否被选中之前是否使用了alreadySelected类和active类,从上一个活动选项卡中删除,如果不是alreadySelected则添加alreadySelected.

响应中的一个选项卡的代码:

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"))
        );
      }
});

为了改变我正在做的标签的类有两种方式,并想知道哪个是有效的.代码风格一:

 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
     });
 }

代码风格2

a.tabBody.refs.body.classList.remove('activeTab');
a.tabBody.refs.body.classList.add('tabPreviewComplete');
a.tabSleeve.refs.body.classList.add('activeTab');

哪种风格有利于这样做以及为什么？

Answer 1

反应的重点是您不需要/不应该直接更新DOM.反应背后的想法是你渲染反应组件(虚拟DOM),并让你反应出来是否以及如何更新DOM.

使用refs更改类是一种非常冒险的策略:您的组件的状态不再与实际DOM同步,这可能会让您在以后调试噩梦.所以我认为Code Style 2(尽管它有效)违反了反应原则.使用refs的少数例外之一是在安装DOM组件后添加一个侦听器.

反应方式是将classNames置于状态.
并做一个setState()更新.
让反应做DOM更新,
这比获取引用和更改classNames更快,更清晰,更容易维护.