компонент react ES6, переменные в конструкции vs переменные состояния

в чем разница между определением переменных в конструкции и их использованием в шаблоне и определением внутри функции 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')
);

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 похож на Реагировать.createClass за исключением getInitialState. Вместо предоставления отдельного метода getInitialState в конструкторе настраивается собственное свойство state. Так же, как возвращаемое значение getInitialState, значение, которое вы назначаете этому.государство будет использоваться в качестве начального состояния для компонента.

два фрагмента ниже показывают разницу в синтаксисе.

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