反应ES6组件,构造变量与状态变量

Question

在构造中定义变量,在模板中使用它们与在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')
);

Answer 1

使用ES6类语法我们不使用getInitialState.相反,我们使用:this.state = {}在构造函数方法中.看看这里的演示:http://codepen.io/PiotrBerebecki/pen/yagVgA

官方的React文档(https://facebook.github.io/react/docs/reusable-components.html#es6-classes):

您还可以将React类定义为纯JavaScript类.例如,使用ES6类语法.API与React.createClass类似,但getInitialState除外.您可以在构造函数中设置自己的state属性,而不是提供单独的getInitialState方法.就像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>
    );
  }
}

以上相当于:

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>
    );
  }
});