<p><strong><em>Краткое резюме:</em></strong></p><br><ul>
<li>Вам необходимо ознакомиться со многими различными элементами React, чтобы разрабатывать выдающиеся веб-приложения React. <strong>Props и St
Вам необходимо ознакомиться со многими различными элементами 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 Передача данных в виде строки из одного компонента в другой
Передайте свойство «бренд» из компонента «Гараж» в компонент «Велосипед»:
Состояние — это обновляемая структура, содержащая информацию или данные о динамическом компоненте, где информация может меняться с течением времени. Каждый раз, когда данные внутри этих компонентов изменяются, 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.
Когда использовать компоненты с отслеживанием состояния
Когда вам нужно создать элементы, которые принимают пользовательский ввод, например щелчок, нажатие и т. д.
Когда вам нужно создать интерактивные элементы на вашей странице
Когда вам нужно передать данные, которые нельзя передать в качестве реквизита
Когда данные зависят от состояния для рендеринга
Реагировать на компоненты без сохранения состояния
вар Реагировать = требовать("реагировать");
var Заголовок = React.createClass({
getInitialState: функция () {
возврат {
someVariable: "Я кое-что помню",
визуализировать: функция () {
вернуть ;
module.exports = Заголовок;
Компоненты без сохранения состояния могут быть созданы с использованием функции или класса. Однако большинство разработчиков предпочитают использовать функциональные компоненты без сохранения состояния, поскольку их легче понять, написать и протестировать. Компоненты без сохранения состояния похожи на функцию, которая принимает входные данные (например, свойства) и возвращает выходные данные (элемент React). Такие компоненты полезны, когда разработчик хочет представить свойства и не нуждается в том, чтобы компоненты были интерактивными. Кроме того, эти компоненты легче понять и попробовать, чем компоненты с отслеживанием состояния.
Когда использовать компоненты без сохранения состояния
Когда нужно только предъявить реквизит
При создании статических элементов, которые не должны быть интерактивными
Когда нет требований к состоянию или внутренним переменным
Когда вам нужен повторно используемый код
Можно ли использовать состояние во всех компонентах?
Раньше состояние обычно можно было использовать только в компонентах класса, а не в функциональных компонентах. Это также является причиной того, что функциональные компоненты считались компонентами без состояния. Хотя после появления хуков 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 — это метод, с помощью которого разработчики могут обновлять состояние настроения. Этот компонент может получить начальное состояние от родительского компонента. Для свойств мы можем передать пустое значение, так как им не нужно начальное значение.
функция CatComponent (реквизит) {
возврат (
<дел>
{props.catName} Кошка, цвет глаз: {props.eyeColor}, возраст: {props.age}
CatComponent.defaultProps = {
catName: "Сэнди",
цвет глаз: "темно-синий",
возраст: "120",
const cat = ;
Здесь CatComponent отображает все следующие строки — «Молочная кошка, цвет глаз: темно-синий, возраст: 120». Здесь мы передали пустые значения для реквизитов атрибутов eyeColor и age; компонент возвращается к значениям по умолчанию. Атрибут с именем catName возвращает ранее назначенное значение. Если мы вызовем CatComponent без значений по умолчанию, он отобразит «Молочная кошка, цвет глаз, возраст:»
React State vs Props — Изменяемость
Основным ограничением реквизитов является то, что они неизменяемы. Как обсуждалось ранее, свойства — это элементы только для чтения, для которых компонент не может установить новое значение. В React есть чистые компоненты, которые не изменяют свои входные и выходные данные и всегда отображают один и тот же результат для одних и тех же реквизитов. Если вы попытаетесь изменить значение реквизита, он вернет TypeError, и этот код не будет работать:
} // TypeError: Невозможно добавить свойство n2, объект не расширяемый
Реквизиты предназначены только для передачи информации от одного компонента к другому. Компоненты не могут изменять свои реквизиты, но они по-прежнему несут ответственность за реквизиты своих дочерних компонентов в дереве компонентов.
Состояние, с другой стороны, состояние React изменчиво. Компоненты с отслеживанием состояния меняются каждый раз, когда пользователь в какой-либо форме взаимодействует с приложением. Кроме того, компоненты состояния отвечают только за управление своим состоянием и не имеют никакого влияния на дочерние компоненты. Каждый компонент с состоянием является частным.
React State vs Props — Варианты использования
Теперь, когда мы понимаем основные различия между состоянием React и реквизитами, мы также должны понять их варианты использования и где использование реквизитов лучше подходит, чем состояние, и наоборот:
Когда использовать Props
Если вы хотите отобразить неинтерактивные компоненты и данные
Для передачи данных от одного компонента к другому
Когда использовать состояние
Для создания интерактивных компонентов
Отслеживайте изменение значений данных компонентов на протяжении их срока службы
Обновлять интерфейс при изменении состояния
Разрешить пользователям изменять состояние — например, взаимодействовать с контактной формой или кнопками
Подведение итогов!
Это все существенные различия междуреквизитами React и состоянием , которые вам необходимо знать, чтобы эффективно использовать компоненты React в вашем следующем проекте React. Убедитесь, что вы понимаете природу, цель, возможности и ограничения обоих и используете их для наилучшего соответствия вашим конкретным требованиям.
Также опубликовано [Здесь] (https://aglowiditsolutions.com/blog/react-state-vs-props/)
![]({"mypicture.png"})
;