React State: основы

React State Программирование и разработка

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 вызовет метод рендеринга за кулисами, поэтому ваш новый контент всегда рендерится.

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

Читайте также:  Найти что-то в векторе в C++?

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

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

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

<button type=”button” onClick={this.occupation}>Occupation Change!</button>

И вот оно! Теперь вы можете увидеть кнопку, которая вызывает функцию с первого шага. Метод содержит.setState()метод, в котором атрибуту занятия устанавливается новое значение «модель».

Несколько.setState()методов обрабатываются не по порядку, поэтому это может привести к конфликтам, о которых вам следует знать — подробнее о них читайте здесь. Это важно, потому что, когда ваш код становится больше и появляется больше строк и больше состояний React, вы должны думать о том, как они будут работать вместе. Это может быть сложно сделать, особенно с асинхронной природой React, когда вы не можете предсказать, в каком порядке будут обрабатываться ваши методы setState.

Вы должны использовать состояние?

Простой ответ — нет. Существует два основных типа компонентов React: функциональные компоненты и компоненты классов. Компоненты без состояния — это функциональные компоненты. По умолчанию в компоненте нет State — вы должны создать его самостоятельно.

Однако без состояния ваше приложение не будет очень интерактивным. Даже если вы выберете реализацию состояния, рекомендуется не переусердствовать в его использовании. Это связано с тем, что чрезмерное использование State в компонентах может затруднить предвидение возможных конфликтов из-за сложности.

Заключение

State и Props — два важных объекта, о которых следует помнить при использовании React. Состояние отслеживает текущее состояние компонента, поскольку оно изменяется в зависимости от обновления данных, определяющих состояние. С другой стороны, реквизит не меняется. Простое практическое правило относительно того, что использовать, — это спросить: «Будут ли атрибуты этого компонента изменены в какой-либо момент?». Если ответ «да», то вы хотите использовать категорию State, поскольку Props неизменяем.

Прежде чем полностью погрузиться в React, убедитесь, что вы знакомы с синтаксисом JavaScript ES6, поскольку React использует многие из его функций, такие как функции стрелок, классы и типы переменных. Кроме того, в React были внесены изменения в отношении использования состояния и других функций без необходимости писать класс в недавнем обновлении React, React Hooks.

Оцените статью
bestprogrammer.ru
Добавить комментарий