🎉 Читай официальный перевод документации! ➡️ ru.reactjs.org 🎉 (⭐ ...и не забудь поставить «звёздочку» репозиторию! ⭐)
React
v16.7.0GitHub

React.Component

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

Обзор

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

class Welcome extends React.Component {
  render() {
    return <h1>Привет, {this.props.name}</h1>;
  }
}

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

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

Примечание:

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

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

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

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

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

Примечание:

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

Обновление

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

Примечание:

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

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

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

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

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

Другие API

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

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

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

Справочник

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

Методы в этом разделе охватывают подавляющее большинство случаев использования, с которыми вы столкнётесь при создании 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 конструкторы используются только для двух целей:

  • Инициализация [local state](/docs/state-and-lifecycle.html путём присвоения объекта this.state.
  • Привязка методов обработчика события к экземпляру.

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

constructor(props) {
  super(props);
  // Не вызывайте здесь this.setState()!
  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`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key), когда это необходимо.

Читайте наш [сообщение в блоге о том, как избегать производного состояния](/blog/2018/06/07/you-probably-dont-need-derived-state.html), чтобы узнать, что делать, если вы считаете, что вам нужно некоторое состояние, которое зависит от свойств.

componentDidMount()

componentDidMount()

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

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

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

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

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

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

componentDidUpdate(prevProps) {
  // Обычное использование (не забудьте сравнить свойства):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

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

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

Примечание

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

componentWillUnmount()

componentWillUnmount()

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

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

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

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

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

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

Этот метод не имеет доступа к экземпляру компонента. Если вы хотите, то можете повторно использовать код между 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) и «фиксации изменений» (например, getSnapshotBeforeUpdate иcomponentDidUpdate).

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

Классовый компонент становится границей ошибки, если он определяет этот метод жизненного цикла. Вызов setState() в нём позволяет зафиксировать необработанную JavaScript-ошибку в приведённом ниже дереве и отобразить резервный интерфейс. Используйте только граница ошибок для восстановления от неожиданных исключений; не пытайтесь использовать их для управления потоком.

Для получения дополнительной информации смотрите раздел Обработка ошибок в React 16.

Примечание

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

static getDerivedStateFromError()

static getDerivedStateFromError(error)

This lifecycle is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.

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; 
  }
}

Note

getDerivedStateFromError() is called during the “render” phase, so side-effects are not permitted. For those use cases, use componentDidCatch() instead.

componentDidCatch()

componentDidCatch(error, info)

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

The lifecycle methods below are marked as “legacy”. They still work, but we don’t recommend using them in the new code. You can learn more about migrating away from legacy lifecycle methods in this blog post.

UNSAFE_componentWillMount()

UNSAFE_componentWillMount()

Примечание

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

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

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

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

UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

Примечание:

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

Примечание:

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

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

В прочих случаях следуйте рекомендациям в посте блога о производном состоянии.

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

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

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

UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState)

Примечание

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

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

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

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

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

(state, props) => stateChange

state — ссылка на предыдущее состояние. Оно не должно напрямую изменятся. Вместо этого изменения должны быть представлены путём создания нового объекта на основе входных данных из prevState и 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};
});

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

forceUpdate()

component.forceUpdate(callback)

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

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

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

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

defaultProps

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

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

CustomButton.defaultProps = {
  color: 'синий'
};

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

  render() {
    return <CustomButton /> ; // props.color будет установлен на синий
  }

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

  render() {
    return <CustomButton color={null} /> ; // props.color остаётся null
  }

displayName

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

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

props

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

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

state

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

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

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

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

Редактировать эту страницу на GitHub