reactState vs refs in react.js [英] setState vs refs in react.js

问题描述

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

1：active

2：previousActive

3：alreadySelected

单击选项卡类后，活动并检查它是否在之前选择或未使用上一个活动选项卡中的 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

< pre class =lang-js prettyprint-override> a.tabBody.refs.body.classList.remove（'activeTab'）;
a.tabBody.refs.body.classList.add（'tabPreviewComplete'）;
a.tabSleeve.refs.body.classList.add（'activeTab'）;


哪种风格适合这样做以及为什么？

解决方案

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

使用refs更改类是一个风险很大的策略：你的组件的状态不再与实际的DOM同步，这可能会让你在以后调试噩梦。所以我认为Code Style 2（尽管它有效）违反了反应原则。
使用refs的少数例外之一是在安装后为DOM组件添加一个监听器。

反应方式是放入classNames处于状态。

并执行 setState（）进行更新。

让反应做DOM更新，

很可能比获取引用和更改classNames更快，更干净，更容易维护。

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:

1:active
2:previousActive
3:alreadySelected

On click of a tab class become active and check whether it is selected before or not using alreadySelected class and active class from the last active tab is remove and if it is not alreadySelected then add alreadySelected.

Code of one tab in 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"))
        );
      }
});

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:

 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 Style 2

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

Which style is good for doing this and why?

解决方案

The point of react is that you do not need to/ should not update DOM directly. The idea behind react is that you render react components (virtual DOM), and that you let react figure out if and how to update DOM.

Changing classes using refs is a very risky strategy: Your component's state is then no longer in sync with actual DOM, which could bring you into debugging nightmares later on. So I would pose that Code Style 2 (even though it works) violates react principles. One of the few exceptions for using refs, is to add a listener to a DOM component after it is mounted.

The react way is to put the classNames in state.
And do a setState() to update.
And let react do the DOM update,
which is very likely to be way faster, cleaner, and easier to maintain than getting refs, and changing classNames.

这篇关于reactState vs refs in react.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！