Существует два типа данных, которые управляют компонентом: props и state. Props устанавливается родителем, и они фиксируются на протяжении всего жизненного цикла компонента. Для данных, которые будут меняться, мы должны использовать состояние.
Ваши собственные компоненты также могут использовать props. Это позволяет вам создать один компонент, который используется во многих разных местах вашего приложения, с немного разными свойствами в каждом месте. См. `this.props` в вашей функции рендеринга:
Раньше вы меняли props с помощью setProps и replaceProps, но они **устарели**. Во время жизненного цикла компонента props не должен меняться (считайте его неизменным).
Поскольку props передаются, и они не могут измениться, вы можете подумать о любом компоненте React, который использует только props (и не состояние) как «чистый», то есть он всегда будет отображать один и тот же результат с одним и тем же входом. Это делает их очень простыми для тестирования.
Когда компонент должен отслеживать информацию между визуализациями, сам компонент может создавать, обновлять и использовать состояние.
Мы будем работать с довольно простым компонентом, чтобы увидеть, как `state` работает в действии. У нас есть кнопка, которая отслеживает, сколько раз вы ее нажали.
Мы меняем состояние, чтобы отслеживать общее количество кликов. Важным момантом является setState. Во-первых, обратите внимание, что setState принимает функцию, потому что setState может запускаться асинхронно. Он должен принимать функцию обратного вызова, а не напрямую обновлять состояние. Вы можете видеть, что у нас есть доступ к prevState в обратном вызове, это будет содержать предыдущее состояние, даже если состояние уже обновлено где-то в другом месте.
**Не делайте этого.** React не может прослушать состояние, которое будет обновляться таким образом, поэтому ваш компонент не будет повторно отображаться. Всегда используйте `setState`.
Хотя это может показаться разумным, оно не вызывает ошибок, и вы можете найти примеры, которые используют этот синтаксис в Интернете, но это неправильно. Это не учитывает асинхронный характер, который может использовать `setState` и может вызывать ошибки с отсутствием данных состояния синхронизации.
`onClick={() => this.updateCount()}` означает, что при нажатии кнопки будет вызываться метод updateCount. Нам нужно использовать **функцию со стрелкой** ES6, так что updateCount будет иметь доступ к состоянию этого экземпляра.
Текст, отображаемый на кнопке - это `Clicked {this.state.count} times`, который будет использовать значение, которое находится в this.state.count во время рендеринга.