React.Component

Последнее обновление 08 августа 2019 13:08:17 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

обзор

React позволяет вам определять компоненты как классы или функции. Компоненты, определенные как классы, в настоящее время предоставляют больше возможностей, которые подробно описаны на этой странице. Чтобы определить класс компонента React, вам нужно расширить React.Component:

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

Единственный метод, который вы должны определить в подклассе React.Component, называется render (). Все остальные методы, описанные в этом руководстве, являются необязательными.

Разработчики React настоятельно рекомендуют не создавать свои собственные базовые классы компонентов. В компонентах React повторное использование кода в основном достигается с помощью композиции, а не наследования.

Жизненный цикл компонента

У каждого компонента есть несколько «методов жизненного цикла», которые вы можете переопределить для запуска кода в определенное время процесса. В приведенном ниже списке часто используемые методы жизненного цикла отмечены жирным шрифтом. Остальные из них существуют для относительно редких случаев использования.

монтаж

Эти методы вызываются в следующем порядке, когда экземпляр компонента создается и вставляется в DOM:

конструктор()
статический getDerivedStateFromProps ()
рендеринга ()
componentDidMount ()

обновление

Обновление может быть вызвано изменениями реквизита или состояния. Эти методы вызываются в следующем порядке, когда компонент перерисовывается:

статический getDerivedStateFromProps ()
shouldComponentUpdate ()
рендеринга ()
getSnapshotBeforeUpdate ()
componentDidUpdate ()

Размонтирование

Этот метод вызывается, когда компонент удаляется из DOM:

componentWillUnmount ()

Обработка ошибок

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

static getDerivedStateFromError ()
componentDidCatch ()

Ссылка:

Часто используемые методы жизненного цикла

Методы в этом разделе охватывают подавляющее большинство случаев, с которыми вы столкнетесь при создании компонентов React.

рендеринга ()

рендеринга ()

Метод render () является единственным обязательным методом в компоненте класса.

При вызове он должен проверить this.props и this.state и вернуть один из следующих типов:

Реагировать элементы. Обычно создается через JSX. Например, <div /> и <MyComponent /> являются элементами React, которые инструктируют React визуализировать узел DOM или другой пользовательский компонент, соответственно.
Массивы и фрагменты. Позвольте вам вернуть несколько элементов из рендера.
Порталы. Позвольте вам отображать детей в другое поддерево DOM.
Строка и цифры. Они отображаются как текстовые узлы в DOM.
Booleans или null. Ничего не рендерить. (В основном существует для поддержки шаблона return test && <Child />, где test - логическое значение.)

Функция render () должна быть чистой, то есть она не изменяет состояние компонента, возвращает один и тот же результат при каждом вызове и не взаимодействует напрямую с браузером.

Если вам нужно взаимодействовать с браузером, вместо этого выполните свою работу в componentDidMount () или других методах жизненного цикла. Сохранение render () в чистоте облегчает понимание компонентов. render () не будет вызываться, если shouldComponentUpdate () возвращает false.

конструктор()

Конструктор (реквизит)

Если вы не инициализируете состояние и не связываете методы, вам не нужно реализовывать конструктор для вашего компонента React.

Конструктор для компонента React вызывается до его монтирования. При реализации конструктора для подкласса React.Component вы должны вызывать super (props) перед любым другим оператором. В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам.

Как правило, в React конструкторы используются только для двух целей:

Инициализация локального состояния путем присвоения объекта this.state.
Привязка методов обработчика событий к экземпляру.

Вы не должны вызывать setState () в конструкторе (). Вместо этого, если вашему компоненту нужно использовать локальное состояние, присвойте начальное состояние this.state непосредственно в конструкторе:

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

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

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

Заметка

Избегайте копирования реквизита в состояние! Это распространенная ошибка:

constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

Проблема в том, что это не нужно (вместо этого можно использовать this.props.color напрямую), а также создает ошибки (обновления цветовой информации не будут отражаться в состоянии).

componentDidMount ()

componentDidMount ()

componentDidMount () вызывается сразу после монтирования компонента (вставки в дерево). Инициализация, которая требует DOM-узлов, должна быть здесь. Если вам нужно загрузить данные из удаленной конечной точки, это хорошее место для создания сетевого запроса.

Этот метод является хорошим местом для настройки любых подписок. Если вы это сделаете, не забудьте отписаться в componentWillUnmount ().

Вы можете вызвать setState () немедленно в componentDidMount (). Это вызовет дополнительный рендеринг, но это произойдет до того, как браузер обновит экран. Это гарантирует, что даже если render () будет вызываться дважды в этом случае, пользователь не увидит промежуточное состояние. Используйте этот шаблон с осторожностью, поскольку он часто вызывает проблемы с производительностью. В большинстве случаев вы должны иметь возможность назначить начальное состояние в конструкторе (). Однако это может быть необходимо для случаев, таких как модалы и всплывающие подсказки, когда вам нужно измерить узел DOM перед рендерингом чего-либо, что зависит от его размера или положения.

componentDidUpdate ()

componentDidUpdate (prevProps, prevState, снимок)

componentDidUpdate () вызывается сразу после обновления. Этот метод не вызывается для начального рендеринга.

Используйте это как возможность работать на DOM, когда компонент был обновлен. Это также хорошее место для выполнения сетевых запросов, если вы сравниваете текущий реквизит с предыдущими реквизитами (например, сетевой запрос может не понадобиться, если реквизиты не изменились).

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Вы можете вызвать setState () немедленно в componentDidUpdate (), но учтите, что он должен быть заключен в условие, как в примере выше, иначе вы вызовете бесконечный цикл. Это также вызвало бы дополнительный повторный рендеринг, который, хотя и невидим для пользователя, может повлиять на производительность компонента. Если вы пытаетесь «отразить» какое-либо состояние для опоры, идущей сверху, рассмотрите возможность использования опоры напрямую. Узнайте больше о том, почему копирование реквизита в состояние вызывает ошибки.

Если ваш компонент реализует жизненный цикл getSnapshotBeforeUpdate () (который встречается редко), возвращаемое им значение будет передано в качестве третьего параметра «снимка» в componentDidUpdate (). В противном случае этот параметр будет неопределенным.

Заметка

componentDidUpdate () не будет вызываться, если shouldComponentUpdate () возвращает false.

componentWillUnmount ()

componentWillUnmount ()

componentWillUnmount () вызывается непосредственно перед размонтированием и уничтожением компонента. Выполните любую необходимую очистку в этом методе, такую как аннулирование таймеров, отмена сетевых запросов или очистка любых подписок, созданных в componentDidMount ().

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