Каждый компонент в React имеет свое состояние, и мы можем определить его начальное состояние . Скажем, например, если на веб-странице происходит событие или мы получаем данные из запроса AJAX , тогда мы должны сбросить состояние компонента и обновить данные компонента. Мы также можем определить Начальное состояние для конкретного компонента.
Начальное состояние React
Есть два способа инициализировать состояние в компоненте React:
- Внутри конструктора
- Непосредственно внутри класса
Внутри конструктора
Когда класс компонента создается, конструктор вызывается первым методом, так что это подходящее место для инициализации всего. — состояние включено. Экземпляр класса уже создан в памяти, поэтому вы можете использовать this ключевое слово , чтобы задать для него свойства. Когда вы пишете конструктор, нужно обязательно вызывать конструктор родительского класса.
Непосредственно внутри класса
Второй способ инициализировать состояние — непосредственно внутри определения класса, используя свойство класса. Но! Если вы используете приложение Create React для начальной загрузки своих проектов, в нем уже включено преобразование свойств класса, и вы можете начать использовать этот синтаксис свойств класса сегодня.
Шаг 1. Создайте один проект реакции, введя следующие команды.
npm install -g create-response- appcreate-response-app my-appcd my-appnpm start
Откроется браузер, и на порту 3000, наше приложение будет запущено. Когда вы изменяете какую-либо строку кода, вам не нужно обновлять страницу, она будет стимулироваться автоматически, и вы сможете увидеть обновленное представление.
Шаг 2. Перейдите к файл src >> App.js и определите одно начальное состояние.
//App.jsimport React, {Component} из 'react'; класс App расширяет Component {state = { name: 'AppDividend'}; render () {return ( {this.state.name} ); }} экспортировать приложение по умолчанию;
Здесь я определил Начальное состояние класса компонента. Если мы хотим изменить состояние после нажатия кнопки и получить ответ AJAX-запроса, мы просто напишем следующую строку, чтобы изменить состояние.
//App.jsthis.setState ({name: 'React Tutorial'})
Пример №2
Мы также можем определить начальное состояние компонента с помощью следующего метода constructor .
//App.jsimport React, {Component} из 'реагировать'; класс Приложение расширяет Компонент {конструктор (реквизиты) {супер (реквизиты); this.state = {имя: 'AppDividend'}; } render () {return ( {this.state. name} ); }} экспортировать приложение по умолчанию;
Помните, что вам не нужно изменять состояние напрямую, за исключением начального состояния , нам всегда нужно использовать setState для изменения состояния.
Также, пожалуйста, не пишите setState () в конструкторе . Это не сработает.
Итак, наш Учебник по начальному состоянию React закончился. Оформить заказ на следующий пример React.js.
