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

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

1 个答案: