Реагируют без ES6

Обычно вы определяете компонент React как простой класс JavaScript:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Если вы еще не используете ES6, вы можете использовать вместо этого модуль create-Reaction-class:

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

API классов ES6 похож на createReactClass () с некоторыми исключениями.

Объявление реквизитов по умолчанию

С функциями и классами ES6 defaultProps определяется как свойство самого компонента:

class Greeting extends React.Component {
  // ...
}
Greeting.defaultProps = {
  name: 'Mary'
};

С createReactClass () вам нужно определить getDefaultProps () как функцию переданного объекта:

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'Mary'
    };
  },
  // ...
});

Установка начального состояния

В классах ES6 вы можете определить начальное состояние, назначив this.state в конструкторе:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

С createReactClass () вы должны предоставить отдельный метод getInitialState, который возвращает начальное состояние:

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

автоматическое связывание

В компонентах React, объявленных как классы ES6, методы следуют той же семантике, что и обычные классы ES6. Это означает, что они не связывают это автоматически с экземпляром. Вам придется явно использовать .bind (this) в конструкторе:

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // This line is important!
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    alert(this.state.message);
  }
  render() {
    // Because `this.handleClick` is bound, we can use it as an event handler.
    return (
      >button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

С createReactClass () в этом нет необходимости, поскольку он связывает все методы:

var SayHello = createReactClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  handleClick: function() {
    alert(this.state.message);
  },
  render: function() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
});

Это означает, что написание классов ES6 содержит немного больше стандартного кода для обработчиков событий, но в больших приложениях положительным моментом является чуть лучшая производительность.

Если шаблон кода слишком непривлекателен для вас, вы можете включить экспериментальное предложение по синтаксису Class Properties с Babel:

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
  }
  // WARNING: this syntax is experimental!
  // Using an arrow here binds the method:
  handleClick = () => {
    alert(this.state.message);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

Обратите внимание, что приведенный выше синтаксис является экспериментальным, и синтаксис может измениться, или предложение может не войти в язык.

Если вы предпочитаете не рисковать, у вас есть несколько вариантов:

• Привязать методы в конструкторе.
• Используйте функции стрелок, например, onClick = {(e) => this.handleClick (e)}.
• Продолжайте использовать createReactClass.