Javascript react.js中的设置状态与参考值

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

1：活动
2：先前活动的
3：已选定

单击某个选项卡类时，该选项卡类将变为活动的，并检查是否在使用

alreadySelected

类之前选择了该选项卡类，并且将删除上一个活动选项卡中的

active

类，如果该选项卡类未被选中，则添加

alreadySelected

react中一个选项卡的代码：

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'）；

---

哪种样式适合这样做？为什么？

react的要点是您不需要/不应该直接更新DOM。react背后的思想是呈现react组件（虚拟DOM），让react确定是否以及如何更新DOM

使用refs更改类是一种非常危险的策略：组件的状态不再与实际的DOM同步，这可能会使您在以后陷入调试噩梦。因此，我认为代码样式2（即使它有效）违反了react原则。 使用refs的少数例外之一是在安装DOM组件后向其添加侦听器

反应方式是将类名置于状态。
然后执行

setState（）

更新。
让react进行DOM更新，

---

这很可能比获取引用和更改类名更快、更干净、更易于维护。

ref表示您使用的是实际的DOM，setState表示您要做出反应，请更新组件的特定属性。 一切都是靠反应来维持的

---

另一方面，如果使用refs，则表示您正在做自己的每一件事，react与您正在更新的属性和属性无关。

代码样式2，因为您使用refs访问dom元素，react将在每个元素上存储虚拟dom id，因此它将更快速、更清晰。但是react与我们所处的状态有关必须通过setState更新内容。但是使用ref我们破坏了它的模式有没有一种替代方法来改变类是的，我的朋友，如果我们更新任何dom，那么我们必须遵循状态，但是你添加和删除了样式类，因为它不需要将它置于状态，因为当你调用setState时，它会再次调用呈现函数，但是当我们使用ref时，它是有不需要使用setState。它会自动呈现组件如果我们有多个类名，然后使用setState，所有的类名都会被这个新的类名替换，因此我们必须使用大量的ifelse条件。i、 为此，首先我们必须获得组件的所有类名，然后使用ifelse条件，我们必须手动设置状态。使用许多ifelse条件不是一个好主意。例如，如果我们有5个选项卡，每个选项卡有3个类，那么我们需要125个if-else条件才能使用state@wintvelt，请你详细说明一下。我的印象是，只要定义了“getInitialState”的元素发生任何更改，React就会自动缓存并批量更新DOM？我非常确定，管理5个选项卡上3个类的代码不需要125条if-else语句。您可以将它们放在状态内的字典中，如

返回{“tabBody”：“active”，“tabSleeve”：“previousActive”}

，并且每当单击一个项目时，只更新处于状态的项目。需要更多关于点击如何影响你的类的信息（在你的帖子中不太清楚）。@Kayote每当a）组件从父组件接收（新）道具或b）调用setState时，每个组件的渲染周期都会被触发。之后，react检查新的道具和状态是否以及在何处导致DOM更改，并且只更改需要更改的内容。React存在于javascript中，因此React需要您坚持使用javascript，并在组件的DOM更新上授予React“垄断权”。@wintvelt解释得很好+1.