Reactjs react ES6组件、构造变量与状态变量

在构造中定义变量并在模板中使用它们与在getInitialState（）函数中定义变量有什么区别

在ES6中，我可以忘记使用getInitialState（）并在构造上移动所有对象

例如：

class TodoApp extends Component {  

  constructor() {
    super();
    this.test1 = 'hello this is a test';
    this.state = { // thanks to @Piotr Berebecki, 
                  // i know to define states variable
      test2:'this is state test'
    }
  }
  changeTest () {
    this.state.test2 = 'my new state test';

  }
  render() {


    return (
      <div>
        <button onClick={this.changeTest}>change</button>
        Test:{this.test1}
        <br/>State Test:{this.test2}
      </div>
     );
  }
}


ReactDOM.render(
  <TodoApp />,
  document.getElementById('app')
);

类TodoApp扩展组件{
构造函数（）{
超级（）；
this.test1='您好，这是一个测试'；
this.state={//感谢@Piotr Berebecki，
//我知道如何定义变量状态
测试2:“这是状态测试”
}
}
变更测试（）{
this.state.test2='我的新状态测试'；
}
render（）{
返回(
改变
测试：{this.test1}

状态测试：{this.test2}
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);

对于ES6类语法，我们不使用

getInitialState

。相反，我们在构造函数方法中使用：

this.state={}

。请看下面的演示：

此外，官方文件（）：

您还可以将React类定义为普通JavaScript类。例如，使用ES6类语法。该API类似于React.createClass，但getInitialState除外。您没有提供单独的getInitialState方法，而是在构造函数中设置自己的state属性。与getInitialState的返回值一样，分配给this.state的值将用作组件的初始状态

下面的两个片段显示了语法上的差异

class TodoApp extends React.Component {
  constructor() {
    super();
    this.state = {
      test2: 1
    };
    this.test3 = 'this is test3';
  }

  changeState() {
    this.setState({
      test2: this.state.test2 + 1
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.changeState.bind(this)}>test2: {this.state.test2}</button>
        <p>test3: {this.test3}</p>
      </div>
    );
  }
}

类TodoApp扩展了React.Component{
构造函数（）{
超级（）；
此.state={
测试2:1
};
this.test3='这是test3'；
}
变更状态（）{
这是我的国家({
test2:this.state.test2+1
});
}
render（）{
返回(
test2:{this.state.test2}
test3:{this.test3}

);
}
}

上述内容相当于：

var TodoApp = React.createClass({
  getInitialState: function() {
    return {
      test2: 1
    };
  },

  test3: 'this is test3',

  changeState: function() {
    this.setState({
      test2: this.state.test2 + 1
    });    
  },

  render: function() {
    return (
      <div>
        <button onClick={this.changeState}>test2: {this.state.test2}</button>
        <p>test3: {this.test3}</p>
      </div>
    );
  }
});

var TodoApp=React.createClass({
getInitialState:函数（）{
返回{
测试2:1
};
},
test3:'这是test3'，
changeState:function（）{
这是我的国家({
test2:this.state.test2+1
});    
},
render:function（）{
返回(
test2:{this.state.test2}
test3:{this.test3}

);
}
});

谢谢，我已经更新了我的问题，变量状态正在工作，但当我试图通过一个简单的按钮来更改它时，情况就不一样了。如果你能解决它，再次感谢万分感谢，我在没有绑定的情况下进行了尝试，因为是ES6，我现在非常了解如何在

changeTest（）

方法中修改状态，使用

this.setState（{test2:'my new state test'）