Question

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

1：活性
2：previousActive
3：alreadySelected

单击选项卡类成为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相比，它很可能更快，更清晰，更易于维护。

Answer 2

ref意味着你正在使用实际的DOM和setState意味着你要做出反应，请更新组件的特定属性。每一件事都是通过反应来维持的。

另一方面，如果你使用refs，这意味着你正在做你自己的所有事情并且反应与你正在更新的属性和属性无关。

reactState vs refs in react.js

2 个答案: