React State: основы

Вы когда-нибудь слышали о stateбиблиотеке JavaScript React, но не знаете, как её использовать? Состояние относится к «как выглядит каждый объект на веб-странице». Концепция проста — это набор данных, относящихся к текущему состоянию компонента, которые можно изменить, изменив данные, которые его описывают. Каждый раз, когда данные меняются, они повторно отображаются на экране компьютера.

Самая сложная часть состояния — это знать, как и когда его использовать. Но не волнуйтесь, потому что в этом руководстве рассказывается, как используется состояние.

Чтобы дать вам краткий обзор, чтобы установить начальное состояние, вы используете this.stateконструктор JavaScript. Чтобы обновить состояние, используйте setStateметод. В этом руководстве мы поговорим больше о состоянии и некоторых способах его использования.

Что такое React State?

Состояние реакции — это объект с набором свойств, которые вы назначаете для компонента, которые влияют на то, как компонент отображается. Компонент, который имеет state, называется с отслеживанием состояния. Обычно вы используете его, если компоненту необходимо отслеживать связанную с ним информацию между визуализацией.

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

Доступ к данным состояния компонента можно получить this.stateи изменить с помощью.setStateметода. Состояние является частным, поскольку его может изменить только компонент, содержащий состояние.

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

Синтаксис состояния реакции

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

this.state={ attribute:»value»);

Например, если вы создаёте компонент таймера, вы должны определить начальное состояние как this.state = {seconds: 0}. Вы знаете, что таймер будет менять своё состояние каждую секунду, но он должен где-то начинать отсчёт. Компонент, который вы кодируете, называется «этот». Этот оператор изменяет состояние компонента, устанавливая один из его атрибутов («секунды») равным значению, которое вы выбираете для определения (в данном случае «0»).

Вот пример файла index.js для компонента с именем «Person». Мы добавим четыре значения — имя, род занятий, волосы и возраст — объекту состояния в компоненте:

import React from ‘react’;
import ReactDOM from ‘react-dom’;

// Компонент, который мы назвали «Человек», со свойствами состояния, определёнными в конструкторе:

class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
name: «Tom Hiddleston»,
occupation: «Actor»,
hair: «black»,
age: 40
};
}

// Функция рендеринга, определяющая, что будет отображаться на экране:

render() {
return (
<div>
<h1>
Person
</h1>
</div>
);
}
}
ReactDOM.render(<Play />, document.getElementById(‘root’));

Последняя строка говорит о том, что код будет проходить через ваш HTML-документ и искать элемент с идентификатором «root», и отображать то, что вы указали для этого в render()методе выше. Вот почему вы должны обязательно добавить следующее внутри тела документа вашего файла index.html:

<div id=»root»> </div>

Этот HTML-тег имеет атрибут ID, равный «root». Здесь будет всё, что вы просили отрендерить компонент.

Обращение к объекту состояния

Вы можете обратиться к объекту состояния, написав this.state.attributeName. Это заменит «attributeName» определёнными атрибутами.

Вот пример использования свойств, которые мы определили ранее, для создания состояния нашего компонента «Человек». Мы будем использовать формат {this.state.attribute} для вызова значения атрибута для компонента, в котором мы пишем наш код.

В этом случае мы скопируем следующий метод в наш компонент «Человек», к которому относится «это». На экране будет отображаться значение, принадлежащее написанному нами атрибуту. Замените render()оператор из нашего компонента «Человек» в последнем примере на этот:

render() {
return (
<div>
<h1>
{this.state.name}
</h1>
<p>
{this.state.name} is an {this.state.occupation} and is
{this.state.age} years old. His hair is currently
{this.state.hair}.
</p>
</div>
);
}

На экране отобразится заголовок со значением атрибута name, которым является Том Хиддлстон. Под ним будет абзац: «Том Хиддлстон — актёр, ему 40 лет. Его волосы в настоящее время чёрные».

Метод.setState ()

Используйте this.setState () для обновления значений объекта состояния. Этот метод принимает один аргумент, которым будет новый атрибут и его значение: {атрибут: «новое значение»}. Для этого используются методы, потому что React вызовет метод рендеринга за кулисами, поэтому ваш новый контент всегда рендерится.

Вот пример использования нашего ранее компонента «Человек». Добавьте следующий код в код компонента «Человек», который мы видели в начале статьи.

1.  Добавьте функцию изменения профессии к «Человеку» в теле класса. Эта функция вызовет.setStateметод. Атрибут, записанный здесь, является атрибутом занятия, и мы записываем значение, которое хотим изменить. Вспомните из кода компонента «Человек», что род занятий в настоящее время является «актёром».

occupation = () =>{this.setState({occupation :”model”});}

2. Вставьте следующий код кнопки.render()в основной <div> метода. Он добавит кнопку, которая вызывает функцию занятия, когда пользователь нажимает на неё, отсюда и атрибут «onClick». На кнопке будет написано «Смена профессии!» написано внутри него.