react reactjs reactjs-development react-tutorial react-state react-props react-state-vs-props what-are-props-in-react

React State vs Props: понимание разницы

21 апреля 2022 г.

Краткое резюме:

• Вам необходимо ознакомиться со многими различными элементами React, чтобы разрабатывать выдающиеся веб-приложения React. Props и State лежат в основе разработки React. Большинство разработчиков часто путают два термина и их функции. Вот подробное сравнение React State и Props для всего, что вам нужно знать:*

React — одна из самых популярных в мире платформ веб-приложений для создания привлекательных и надежных современных веб-приложений для бизнеса. Поскольку это фреймворк на основе JavaScript с открытым исходным кодом, многие разработчики также стремятся изучить React.

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

Что такое реквизиты в React?

Props (аббревиатура от Properties) — это аргументы, которые вы передаете компонентам React. Они передаются через шаблоны HTML и представляют собой метод передачи данных из одного компонента в другой. Реквизиты можно сравнить с функциональными аргументами. Они передаются компоненту так же, как аргументы передаются в функции.

Давайте разберемся, как работают реквизиты шаг за шагом:

1. Отправка свойств компоненту

Добавление атрибута «бренд» к элементу «Велосипед»:

const myelement = ;

2. Компонент получит аргумент как объект реквизита

Добавьте атрибут бренда в компонент:

функция велосипед (реквизит) {

return

Я { props.brand } !

;

3.1 Передача данных в виде строки из одного компонента в другой

Передайте свойство «бренд» из компонента «Гараж» в компонент «Велосипед»:

функция велосипед (реквизит) {

return

Я {props.brand}!

;

функция Гараж() {

возврат (

Какой велосипед стоит у меня в гараже?

<Бренд велосипеда="Harley Davidson" />

ReactDOM.render(, document.getElementById("root"));

3.2 Передача переменной из одного компонента в другой

Если вам нужно отправить переменную вместо строки, вам нужно создать переменную с именем bikeName и отправить ее компоненту Bike:

функция велосипед (реквизит) {

return

Я {props.brand}!

;

функция Гараж() {

const bikeName = "Harley Davidson";

возврат (

Какой велосипед стоит у меня в гараже?

<Марка велосипеда={bikeName} />

ReactDOM.render(, document.getElementById("root"));

3.3 Передача объекта из одного компонента в другой

Создайте объект с именем bikeInfo и отправьте его компоненту Bike:

функция велосипед (реквизит) {

return

Я {props.brand.model}!

;

функция Гараж() {

const bikeInfo = { название: "Harley Davidson", модель: "Street Glide" };

возврат (

Какой велосипед у меня в гараже?

<Марка велосипеда={bikeInfo} />

ReactDOM.render(, document.getElementById("root"));

Что такое состояние в React?

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

Пример кода состояния реакции

импортировать React, {Компонент} из «реагировать»;

Приложение класса расширяет React.Component {

конструктор () {

супер();

this.state = {displayBio: true};

оказывать() {

const bio = this.state.displayBio ? (

<дел>

Aglowid — ведущая компания по разработке React.js

) : нулевой;

возврат (

<дел>

Добро пожаловать в Агловид!

{ био }

экспортировать приложение по умолчанию;

Для установки State необходимо вызвать метод super() в конструкторе. Это из-за этого. Состояние не инициализируется до вызова метода super().

Изменение состояния в React.js

Состояние отличается от реквизита, поскольку значение состояния компонента может быть изменено. Мы можем использовать метод setState() и передать новый объект состояния в качестве аргумента. Согласно официальной документации React.js, когда мы изменяем значение объекта State, компонент перерисовывается, после чего вывод обновляется новыми значениями.

велосипед класса расширяет React.Component {

конструктор (реквизит) {

супер (реквизит);

это.состояние = {

марка: "Харлей Дэвидсон",

модель: "Стрит Глайд",

красный цвет",

год: 2022,

изменить цвет = () => {

this.setState({цвет: "черный"});

оказывать() {

возврат (

<дел>

Мой {this.state.brand}

<р>

Это {this.state.color}

{эта.государственная.модель}

с {this.state.year}.

Изменить цвет

Компонент с отслеживанием состояния и компонент без сохранения состояния в React

Компоненты — это основа разработки React. В React есть два типа компонентов — с сохранением состояния и без состояния. Как следует из названия, с сохранением состояния — это компоненты, которые содержат некоторое состояние, тогда как без состояния — это компоненты без состояния. Оба эти компонента могут использовать реквизит. Чтобы понять разницу между компонентами с сохранением состояния и без сохранения состояния, нам нужно понять их по отдельности:

Реакция компонентов с отслеживанием состояния

вар Реагировать = требовать("реагировать");

var Заголовок = React.createClass({

getInitialState: функция () {

возврат {

someVariable: "Я кое-что помню",

визуализировать: функция () {

вернуть ;

module.exports = Заголовок;

Компоненты с состоянием могут включать или не включать реквизиты, но определенно будут иметь состояние. У них есть свое состояние, которое можно изменить в любой момент. Всякий раз, когда компонент меняет состояние, он будет повторно отображаться, чтобы отразить изменения веб-приложения React. Такие компоненты полезны, когда вашим приложениям необходимо реагировать на взаимодействие и ввод данных пользователем. Это позволяет приложениям React иметь динамический пользовательский интерфейс с помощью связи клиент-сервер, позволяя разработчикам React создавать динамические и интерактивные страницы React.

Когда использовать компоненты с отслеживанием состояния

1. Когда вам нужно создать элементы, которые принимают пользовательский ввод, например щелчок, нажатие и т. д.

1. Когда вам нужно создать интерактивные элементы на вашей странице

1. Когда вам нужно передать данные, которые нельзя передать в качестве реквизита

1. Когда данные зависят от состояния для рендеринга

Реагировать на компоненты без сохранения состояния

вар Реагировать = требовать("реагировать");

var Заголовок = React.createClass({

getInitialState: функция () {

возврат {

someVariable: "Я кое-что помню",

визуализировать: функция () {

вернуть ;

module.exports = Заголовок;

Компоненты без сохранения состояния могут быть созданы с использованием функции или класса. Однако большинство разработчиков предпочитают использовать функциональные компоненты без сохранения состояния, поскольку их легче понять, написать и протестировать. Компоненты без сохранения состояния похожи на функцию, которая принимает входные данные (например, свойства) и возвращает выходные данные (элемент React). Такие компоненты полезны, когда разработчик хочет представить свойства и не нуждается в том, чтобы компоненты были интерактивными. Кроме того, эти компоненты легче понять и попробовать, чем компоненты с отслеживанием состояния.

Когда использовать компоненты без сохранения состояния

1. Когда нужно только предъявить реквизит

1. При создании статических элементов, которые не должны быть интерактивными

1. Когда нет требований к состоянию или внутренним переменным

1. Когда вам нужен повторно используемый код

Можно ли использовать состояние во всех компонентах?

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

Понимание различий: React State и Props

До сих пор мы подробно разбирали концепции React props и State и понимали разницу между компонентами React с состоянием и без состояния. Теперь мы можем провести быстрое сравнение, выделив различия между React props и State:

Реквизиты могут быть пустыми, хотя для состояния требуется начальное значение

Свойства не должны иметь никакого установленного начального значения. Состояние, однако, должно иметь начальное значение. Для компонентов с состоянием первое значение State должно быть объявлено напрямую:

Вы можете использовать constructor(): для компонентов класса

класс CalmDown расширяет React.Component {

конструктор (реквизит) {

супер (реквизит);

это.состояние = {

currentState: "без паники",

Для функциональных компонентов мы можем установить начальное значение с помощью React Hook useState():

импортировать {useState} из "реагировать";

функция TimeToPanic() {

// Объявить новую переменную состояния, которую мы назовем "настроение"

const [настроение, изменение настроения] = useState ("спокойствие"); // мы объявляем новую переменную состояния «настроение» с начальным значением, равным 0

возврат (

<дел>

Вы чувствуете {настроение

changeMood((mood = "паника"))}>Нажми меня