Цитаты из книги автора React. Быстрый старт
Цитируя Джона К. Максвелла, «терпите неудачу рано, терпите неудачу часто, но всегда терпите неудачу, продвигаясь вперед
На самом деле классы не существовали в ранних версиях языка JavaScript, они были придуманы позже и являются лишь синтаксическим сахаром поверх функций и прототипов
настраиваемый функциональный компонент — просто функция, которая возвращает нужный вам пользовательский интерфейс.
необходимо установить начальное состояние в конструкторе класса с помощью this.state. Имейте в виду, что конструктор — единственное место, где можно установить состояние напрямую, не вызывая this.setState().
Возможно, вы заметили, что в предыдущем фрагменте кода принимает свойство defaultValue, в отличие от привычного вам дочернего элемента text в обычном HTML. Все дело в некоторых различиях между React и традиционным HTML, которые проявляются при работе с элементами формы. Этот вопрос рассматривается далее в книге, но будьте уверены: различий не слишком много. Кроме того, вы поймете, что они призваны облегчить вашу жизнь как разработчика.
Аналогично тому, как вы получаете доступ к свойствам через this.props, вы читаете состояние через объект this.state. Чтобы обновить состояние, вы используете this.setState(). В момент вызова React вызывает метод render вашего компонента (и всех его дочерних компонентов) и обновляет пользовательский интерфейс.
Обновления UI после вызова this.setState() выполняются с помощью механизма очередей, который эффективно группирует изменения. Обновление this.state напрямую может привести к неожиданному поведению, и вам не следует этого делать. Как и в случае с this.props, считайте, что объект this.state доступен только для чтения не только потому, что это семантически плохая идея, но и потому, что он может вести себя неожиданным для вас образом. Аналогично никогда не вызывайте this.render() самостоятельно — вместо этого предоставьте React пакетную обработку изменений, определите наименьший объем работы и вызывайте render(), когда и если это необходимо.
Обратите внимание, что в операторе return метода render() возвращаемое значение заключено в круглые скобки. Это вызвано механизмом автоматической вставки точки с запятой (ASI) JavaScript. Выражение return, за которым следует новая строка, равносильно return; что, в свою очередь, равносильно return undefined; и это определенно не то, что вы хотите.