Один довольно популярный вопрос, который задают на досках объявлений по программированию, касается сходства и различий между 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.