reactState vs refs in react.js

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

1：有源
2：previousActive
3：alreadySelected

单击选项卡类时，它将变为active并检查是否在使用之前选择了已选择的类，并且删除了最后一个活动选项卡中的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，这意味着你正在做你自己的所有事情并且反应与你正在更新的属性和属性无关。