Поиск по сайту:

Понимание конструкторов с компонентами React


Конструктор — это метод, который автоматически вызывается при создании объекта из класса. Он может обрабатывать ваши исходные настройки, такие как установка некоторых свойств объекта по умолчанию или проверка правильности переданных аргументов. Проще говоря, конструктор помогает в создании вещей.

В React конструктор ничем не отличается. Его можно использовать для привязки обработчиков событий к компоненту и/или инициализации локального состояния компонента. Метод constructor() запускается до монтирования компонента и, как и большинство вещей в React, имеет несколько правил, которым вы должны следовать при их использовании.

Вызовите super(props) перед использованием this.props

Из-за особенностей конструктора объект this.props сразу недоступен и может привести к ошибкам. Этот конструктор выдаст ошибку:

constructor() {
  console.log(this.props);
}

Вместо этого мы берем значение props из constructor() и передаем его методу super():

constructor(props) {
  super(props);
  console.log(this.props);
}

Когда вы вызываете метод super(), он вызывает конструктор родительского класса, которым в случае компонента React является React.Component.

Никогда не вызывайте setState() внутри конструктора()

Конструктор вашего компонента — идеальное место для установки начального состояния вашего компонента. Вместо использования setState(), как в других методах вашего класса, вам нужно напрямую установить начальное состояние:

constructor(props) {
  super(props);

  this.state = {
    reptile: 'alligator',
    color: '#008f68',
  };
}

Конструктор — это единственное место, где вы должны напрямую назначать локальное состояние. В любом другом месте нашего компонента вместо этого вы должны полагаться на setState().

Не назначайте значения из this.props в this.state.

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

Когда вы делаете что-то вроде этого:

constructor(props) {
  super(props);

  this.state = {
    reptile: props.reptile,
  };
}

Вы потеряете возможность запускать setState() позже и обновлять свойство.

Вместо того, чтобы назначать свойство непосредственно состоянию, вы можете просто сослаться на свойство непосредственно в коде, вызвав this.props.reptile.

Связывание событий в одном месте

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

constructor(props) {
  super(props);

  this.state = {
    // Sets that initial state
  };

  // Our event handlers
  this.onClick = this.onClick.bind(this);
  this.onKeyUp = this.onKeyUp.bind(this);
  // et cetera...
}

Избегайте использования побочных эффектов или подписок в конструкторе().

Я понимаю, вы только что создали новый компонент и хотите, чтобы он извлекал данные из API и устанавливал значения в состояние. Имеет смысл сделать это в конструкторе до монтирования компонента, верно?

НЕПРАВИЛЬНЫЙ!

Для таких вещей, как подписки, которые будут обновлять состояние и другие побочные эффекты, вы должны поместить логику в componentDidMount(), которая сработает сразу после монтирования компонента и не доставит вам никаких проблем, если вы обновляете состояние внутри него.

Вам вообще нужен конструктор?

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

На самом деле, если вам не нужны обработчики состояний или событий, вам, вероятно, вообще не нужен компонент на основе классов. Вы можете сэкономить немного лишнего набора текста и просто использовать функциональный компонент.