Визуализация состояния в пользовательском интерфейсе
Как только вы определяете начальное состояние компонента, вы можете отобразить любую его часть в визуализированном пользовательском интерфейсе. Если компонент является компонентом с состоянием, он всегда будет иметь доступ к данным в state внутри всего инстанса компонента, в том числе в методе render() через свойство this.state . Если вы хотите получить доступ к значению состояния в return метода рендеринга, вы должны заключить его в фигурные скобки. State - одна из самых мощных особенностей компонентов в React. Он позволяет отслеживать важные данные в вашем приложении и отображать пользовательский интерфейс в ответ на изменения этих данных. Если ваши данные изменятся, ваш пользовательский интерфейс изменится. React использует то, что называется виртуальным DOM, чтобы отслеживать изменения за кулисами. Когда данные состояния обновляются, он запускает повторный рендеринг компонентов с использованием этих данных, включая дочерние компоненты, которые получили данные в качестве свойств. React обновляет фактический DOM, но только там, где это необходимо. Это означает, что вам не нужно беспокоиться об изменении DOM. Вы просто заявляете, как должен выглядеть пользовательский интерфейс. Обратите внимание, что если вы создаете компонент с состоянием, никакие другие компоненты не знают о его state . Его state полностью инкапсулировано или локально для этого компонента, если вы не передадите данные состояния дочернему компоненту в качестве props . Это понятие инкапсулированного state очень важно, поскольку оно позволяет вам писать определенную логику, а затем содержать и изолировать эту логику в одном месте вашего кода.
В редакторе есть компонент MyComponent, который уже содержит объект состояния this.state. В методе return этого компонента выведите тег h1 с содержимым свойства name состояния компонента.
Заметка: Внутри тега h1 должно быть выведено значение из состояния и ничего больше. В JSX любой код, который не является строкой, должен быть заключен в фигурные скобки { }.