Один довольно популярный вопрос, который задают на досках объявлений по программированию, касается сходства и различий между constructor React и встроенным методом getInitialState. Хотя простой ответ на этот вопрос действительно прост: «getInitialState — это метод, дружественный к ES5, для определения начального состояния компонента React», есть еще пара деталей, связанных с getInitialState, а также с поддержкой React ES5, которые интересно и полезно выделить. .

Конструктор против getInitialState: с классами или без них:

Одним из фундаментальных различий между ES5 и ES6 в отношении реализации React является новое ключевое слово class. Он позволяет определять компоненты React как классы, что является знакомой структурой данных для всех, кто имел опыт работы с более традиционными объектно-ориентированными языками, такими как Java или C++. Структура класса также обеспечивает естественную организацию элементов компонента, таких как состояние, свойства, методы жизненного цикла и функции-члены. Однако ES5 не обеспечивал такого же удобства. Поэтому вместо определения компонента React как класса:

class HelloWorld extends React.Component {
  render() {
    return <span>Hello World</span>;
  }
}

Вы бы полагались на вспомогательный модуль под названием create-react-class:

var createReactClass = require('create-react-class');
var HelloWorld = createReactClass({
  render: function() {
    return <span>Hello World</span>;
  }
});

И именно внутри объекта, переданного в create-react-class, вы можете определить начальное состояние, заполнив атрибут getInitialState:

var HelloWorld = createReactClass({
  getInitialState: function() {
    return {name: this.props.name};
  },
  render: function() {
    return <span>Hello {this.state.name}</span>;
  }
});

Что в реализации ES6 будет эквивалентно:

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    }
  }
  render() {
    return <span>Hello {this.state.name}</span>;
  }
}

Автопривязка

Стоит отметить одно отличие: метод create-react-class автоматически привязывает this к каждому методу атрибута. Это больше не верно, если вы определяете компоненты React, используя общий синтаксис класса ES6, что делает так, что вам нужно вручную привязывать this к внутренним методам:

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    }

    this.changeName = this.changeName.bind(this);
  }
  changeName() {
    this.setState({ name: "World" });
  }
  ...
}

Или иначе используйте сокращение «функция стрелки», которая заботится о привязке:

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    }
  }
  changeName = () => {
    this.setState({ name: "World" });
  }
  ...
}

Напутствие

После обновления до ES6 появилось несколько новых итераций React. Теперь вы можете вообще отказаться от объявления constructor и просто объявить state встроенным в качестве члена класса или использовать React Hooks в качестве нового способа инициализации состояний. Однако поддержка ES5 остается полезной для устаревших систем и повышает общую гибкость React как набора инструментов.

Вы можете узнать больше о поддержке React ES5 в официальной записи документа здесь и записи в блоге бета-версии v0.13.0 здесь, для соответствующих изменений ES6.

Первоначально опубликовано на https://www.loginradius.com.