React.Component

На этой странице представлена подробная справка по API для определения класса компонента React. Предполагается, что вы знакомы с основными понятиями React, такими как Компоненты и свойства, а также Состояние и жизненный цикл. Если нет, прочитайте их сначала.

Обзор

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

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

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

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

Примечание:

React не заставляет вас использовать синтаксис класса ES6. Если вы предпочитаете этого избегать, вы можете использовать модуль create-react-class или аналогичную пользовательскую абстракцию вместо него. Подробнее об использовании React без ES6 можно узнать на странице Использование React без ES6.

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

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

Монтирование

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

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Примечание:

Эти методы считаются устаревшими, и их следует избегать в новом коде:

• UNSAFE_componentWillMount()

Обновление

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

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Примечание:

Эти методы считаются устаревшими, и их следует избегать в новом коде:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

Демонтирование

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

• componentWillUnmount()

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

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

• static getDerivedStateFromError()
• componentDidCatch()

Другие API

Каждый компонент также предоставляет некоторые другие API:

• setState()
• forceUpdate()

Свойства класса

• defaultProps
• displayName

Свойства экземпляра

• props
• state

Ссылка

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

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

render()

render()

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

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

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

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

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

Примечание

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

constructor()

constructor(props)

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

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

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

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

Вы не должны вызывать setState() в constructor(). Вместо этого, если вашему компоненту необходимо использовать локальное состояние, присвойте начальное состояние непосредственно 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 напрямую вместо этого), но и создаёт ошибки (обновления свойства color не будут отражаться в состоянии).

Используйте этот шаблон только в том случае, если вы намеренно хотите игнорировать обновления свойств. В этом случае имеет смысл переименовать свойство в initialColor или defaultColor. Затем вы можете принудительно «сбросить» внутреннее состояние компонента, изменив его key при необходимости.

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

componentDidMount()

componentDidMount()

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

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

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

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

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(), потому что компонент никогда не будет повторно отрисован. После размонтирования экземпляра компонента он никогда не будет монтироваться снова.

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

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

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

Используйте shouldComponentUpdate() , чтобы сообщить React, что вывод компонента не зависит от текущего изменения состояния или свойств. По умолчанию компонент перерисовывается при каждом изменении состояния, и в подавляющем большинстве случаев вам следует полагаться на это поведение по умолчанию.

shouldComponentUpdate() вызывается перед отрисовкой, когда поступают новые свойства или состояние. По умолчанию true. Этот метод не вызывается для начальной отрисовки или когда используется forceUpdate().

Этот метод существует только как оптимизация производительности. Не полагайтесь на него, чтобы «предотвратить» отрисовку, так как это может привести к ошибкам. Рассмотрите использование встроенного PureComponent вместо написания shouldComponentUpdate() вручную. PureComponent выполняет поверхностное сравнение свойств и состояния и снижает вероятность пропуска необходимой обновления.

Если вы уверены, что хотите написать его вручную, вы можете сравнить this.props с nextProps и this.state с nextState и вернуть false , чтобы сообщить React, что обновление можно пропустить. Обратите внимание, что возвращение false не предотвращает перерисовку дочерних компонентов, когда их состояние меняется.

Мы не рекомендуем выполнять проверки глубокого равенства или использовать JSON.stringify() в shouldComponentUpdate(). Это очень неэффективно и навредит производительности.

В настоящее время, если shouldComponentUpdate() возвращает false, тогда UNSAFE_componentWillUpdate(), render() и componentDidUpdate() не будут вызваны. В будущем React может рассматривать shouldComponentUpdate() как подсказку, а не как строгое указание, и возвращение false может по-прежнему привести к повторной отрисовке компонента.

static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps вызывается непосредственно перед вызовом метода render, как при начальной установке, так и при последующих обновлениях. Он должен возвращать объект для обновления состояния или null для того, чтобы ничего не обновлять.

Этот метод существует для редких случаев использования, когда состояние зависит от изменений свойств со временем. Например, он может быть полезен для реализации компонента <Transition> , который сравнивает свои предыдущие и последующие дочерние элементы, чтобы решить, какой из них анимировать.

Вычисление состояния приводит к громоздкому коду и затрудняет понимание ваших компонентов. Убедитесь, что вы знакомы с более простыми альтернативами:

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

Этот метод не имеет доступа к экземпляру компонента. При желании вы можете повторно использовать код между getDerivedStateFromProps() и другими методами класса, выделив чистые функции свойств и состояния компонента за пределами определения класса.

Обратите внимание, что этот метод вызывается при каждом рендере, независимо от причины. Это в отличие от UNSAFE_componentWillReceiveProps, который вызывается только тогда, когда родитель вызывает повторную отрисовку, а не в результате локального setState.

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() вызывается непосредственно перед тем, как последняя отрисованная выходная информация передаётся, например, в DOM. Это позволяет вашему компоненту захватывать некоторую информацию из DOM (например, положение прокрутки) перед её потенциальным изменением. Любое значение, возвращённое этим методом жизненного цикла, будет передано в качестве параметра в componentDidUpdate().

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

Должно быть возвращено значение снимка (или null).

Например:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

В приведенных выше примерах важно читать свойство scrollHeight в getSnapshotBeforeUpdate , так как могут быть задержки между фазами «render» (например, render) и «commit» (например, getSnapshotBeforeUpdate и componentDidUpdate).

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

Обработчики ошибок — это компоненты React, которые перехватывают ошибки JavaScript в любом месте в их дереве дочерних компонентов, регистрируют эти ошибки и отображают интерфейс отката вместо дерева компонентов, которое потерпело сбой. Обработчики ошибок перехватывают ошибки при отрисовке, в методах жизненного цикла и в конструкторах всего дерева под ними.

Компонент класса становится обработчиком ошибок, если он определяет любой (или оба) из методов жизненного цикла static getDerivedStateFromError() или componentDidCatch(). Обновление состояния из этих методов жизненного цикла позволяет перехватывать необработанную ошибку JavaScript в нижестоящем дереве и отображать интерфейс отката.

Используйте обработчики ошибок только для восстановления от непредвиденных исключений; не пытайтесь использовать их для управления потоком.

Подробнее см. Обработка ошибок в React 16.

Примечание

Обработчики ошибок перехватывают ошибки только в компонентах ниже их в дереве. Обработчик ошибок не может перехватить ошибку внутри себя.

static getDerivedStateFromError()

static getDerivedStateFromError(error)

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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Примечание

getDerivedStateFromError() вызывается во время фазы «render», поэтому побочные эффекты запрещены. Для таких случаев используйте componentDidCatch().

componentDidCatch()

componentDidCatch(error, info)

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

1. error - Ошибка, которая была сгенерирована.
2. info - Объект со свойством componentStack , содержащим информацию о том, какой компонент сгенерировал ошибку.

componentDidCatch() вызывается во время фазы «commit», поэтому побочные эффекты разрешены. Он должен использоваться для задач, таких как регистрация ошибок:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Производственные и отладочные сборки React немного различаются в способе обработки ошибок componentDidCatch().

В режиме отладки ошибки поднимаются до window, это означает, что любой window.onerror или window.addEventListener('error', callback) будет перехватывать ошибки, перехваченные componentDidCatch().

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

Примечание

В случае ошибки вы можете отобразить интерфейс отката с componentDidCatch() , вызвав setState, но это будет устаревшим в будущих выпусках. Используйте static getDerivedStateFromError() для обработки отображения отката вместо этого.

Устаревшие методы жизненного цикла

Методы жизненного цикла ниже помечены как «устаревшие». Они по-прежнему работают, но мы не рекомендуем использовать их в новом коде. Более подробную информацию о миграции от устаревших методов жизненного цикла можно найти в этой статье блога.

UNSAFE_componentWillMount()

UNSAFE_componentWillMount()

Примечание

Этот метод жизненного цикла ранее назывался componentWillMount. Это имя будет работать до версии 17. Используйте rename-unsafe-lifecycles кодмод для автоматического обновления ваших компонентов.

UNSAFE_componentWillMount() вызывается непосредственно перед началом монтирования. Он вызывается до render(), поэтому вызов setState() синхронно в этом методе не вызовет дополнительной отрисовки. В целом, мы рекомендуем использовать constructor() для инициализации состояния вместо этого.

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

Это единственный метод жизненного цикла, вызываемый при рендеринге на стороне сервера.

UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

Примечание

Этот метод жизненного цикла ранее назывался componentWillReceiveProps. Это имя будет работать до версии 17. Используйте rename-unsafe-lifecycles кодмод для автоматического обновления ваших компонентов.

Примечание:

Использование этого метода жизненного цикла часто приводит к ошибкам и несоответствиям

• Если вам нужно выполнить побочное действие (например, загрузка данных или анимация) в ответ на изменение свойств, используйте метод жизненного цикла componentDidUpdate вместо этого.
• Если вы использовали componentWillReceiveProps для повторного вычисления некоторых данных только при изменении свойства, используйте вспомогательную функцию запоминания вместо этого.
• Если вы использовали componentWillReceiveProps для «сброса» некоторого состояния при изменении свойства, рассмотрите возможность сделать компонент полностью управляемым или полностью неуправляемым с key вместо этого.

В других случаях следуйте рекомендациям в этой статье о выведенном состоянии.

UNSAFE_componentWillReceiveProps() вызывается перед тем, как смонтированный компонент получит новые свойства. Если вам нужно обновить состояние в ответ на изменения свойств (например, для его сброса), вы можете сравнить this.props и nextProps и выполнить переходы состояния, используя this.setState() в этом методе.

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

React не вызывает UNSAFE_componentWillReceiveProps() с начальными свойствами во время монтирования. Он вызывает этот метод только в том случае, если некоторые свойства компонента могут обновиться. Вызов this.setState() обычно не вызывает UNSAFE_componentWillReceiveProps().

UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState)

Примечание

Этот метод жизненного цикла ранее назывался componentWillUpdate. Это имя будет продолжать работать до версии 17. Используйте rename-unsafe-lifecycles codemod для автоматического обновления ваших компонентов.

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

Обратите внимание, что вы не можете вызвать this.setState() здесь; вы также не должны выполнять какие-либо другие действия (например, отправлять действие Redux), которые вызовут обновление компонента React перед возвратом UNSAFE_componentWillUpdate().

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

Примечание

UNSAFE_componentWillUpdate() не будет вызван, если shouldComponentUpdate() вернёт false.

Другие API

В отличие от методов жизненного цикла выше (которые React вызывает за вас), методы ниже — это методы, которые вы можете вызывать из своих компонентов.

Их всего два: setState() и forceUpdate().

setState()

setState(updater, [callback])

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

Подумайте о setState() как о запросе, а не как об immediate команде обновления компонента. Для лучшего восприятия производительности React может отложить её и затем обновить несколько компонентов в одном проходе. React не гарантирует, что изменения состояния будут применены немедленно.

setState() не всегда немедленно обновляет компонент. Он может выполнить объединение или отсрочить обновление до более позднего момента. Это делает чтение this.state сразу после вызова setState() потенциальной ошибкой. Вместо этого используйте componentDidUpdate или обратный вызов setState (setState(updater, callback)), каждый из которых гарантированно будет вызван после применения обновления. Если вам нужно установить состояние на основе предыдущего состояния, прочитайте об аргументе updater ниже.

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

Первый аргумент — это функция updater со следующим сигнатуром:

(state, props) => stateChange

state — ссылка на состояние компонента на момент применения изменения. Его не следует напрямую изменять. Вместо этого изменения должны быть представлены построением нового объекта на основе ввода от state и props. Например, предположим, что мы хотим увеличить значение в состоянии на props.step:

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

И state и props, полученные функцией-обработчиком, гарантированно будут актуальными. Выходной результат обработчика объединяется поверхностно с state.

Второй параметр для setState() — это необязательная функция обратного вызова, которая будет выполнена после завершения setState и повторной отрисовки компонента. Обычно мы рекомендуем использовать componentDidUpdate() для такой логики вместо этого.

Вы можете необязательно передать объект в качестве первого аргумента setState() вместо функции:

setState(stateChange[, callback])

Это выполняет поверхностное объединение stateChange в новое состояние, например, для корректировки количества товаров в корзине:

this.setState({quantity: 2})

Эта форма setState() также асинхронна, и несколько вызовов в течение одного цикла могут быть объединены вместе. Например, если вы попытаетесь увеличить количество товара более одного раза в одном цикле, это приведёт к эквиваленту:

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

Последующие вызовы будут перезаписывать значения от предыдущих вызовов в том же цикле, поэтому количество будет увеличено только один раз. Если следующее состояние зависит от текущего состояния, мы рекомендуем использовать форму функции-обработчика:

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

Для более подробной информации см:

• Руководство по состоянию и жизненному циклу
• Подробно: Когда и почему вызовы setState() объединяются?
• Подробно: Почему this.state не обновляется немедленно?

forceUpdate()

component.forceUpdate(callback)

По умолчанию, когда состояние или свойства вашего компонента изменяются, ваш компонент будет повторно отрисовываться. Если ваш метод render() зависит от других данных, вы можете сообщить React, что компонент должен быть повторно отрисован, вызвав forceUpdate().

Вызов forceUpdate() заставит вызвать render() в компоненте, пропуская shouldComponentUpdate(). Это вызовет обычные методы жизненного цикла для дочерних компонентов, включая метод shouldComponentUpdate() каждого дочернего элемента. React по-прежнему будет обновлять DOM только в том случае, если разметка изменится.

Обычно следует избегать всех случаев использования forceUpdate() и читать только из this.props и this.state в render().

Свойства класса

defaultProps

defaultProps можно определить как свойство самого класса компонента, чтобы установить значения свойств по умолчанию для класса. Это используется для undefined свойств, но не для null свойств. Например:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

Если props.color не предоставлено, по умолчанию оно будет установлено в 'blue':

  render() {
    return <CustomButton /> ; // props.color will be set to blue
  }

Если props.color установлено в null, оно останется null:

  render() {
    return <CustomButton color={null} /> ; // props.color will remain null
  }

displayName

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

Свойства экземпляра

props

this.props содержит свойства, определённые вызывающим элементом этого компонента. См. Компоненты и Свойства для введения в свойства.

В частности, this.props.children — это специальное свойство, которое обычно определяется дочерними тегами в выражении JSX, а не в самом теге.

state

Состояние содержит данные, специфичные для этого компонента, которые могут меняться со временем. Состояние определяется пользователем и должно быть обычным JavaScript-объектом.

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

См. Состояние и жизненный цикл для получения дополнительной информации о состоянии.

Никогда не изменяйте this.state напрямую, так как вызов setState() впоследствии может заменить произведённое вами изменение. Рассматривайте this.state как неизменяемый.