Разница между состоянием реакции против реквизита

В этой статье React State vs Props мы выясним основные различия между двумя очень важными компонентами реакции, состоянием и реквизитом. Мы рассмотрим некоторые основные примеры, чтобы выяснить различия между состоянием и реквизитом. Также мы увидим ситуации, когда можно использовать состояние или реквизит.

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

Код:

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
);
)
render() (
return (
Name (this.state. Company)
This is a (this.state.color)
(this.state. Modelnumber)
from (this.state. launch-year).

);
)
)

Выход:

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

Код:

class Car extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Ford",
Modelnumber : "Mustang",
color: "red",
launch-year: 1964
);
)
changeColor = () => (
this.setState((color: "green"));
)
render() (
return (
My (this.state.Company)

class Car extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Ford",
Modelnumber : "Mustang",
color: "red",
launch-year: 1964
);
)
changeColor = () => (
this.setState((color: "green"));
)
render() (
return (
My (this.state.Company)

class Car extends React.Component (
constructor(props) (
super(props);
this.state = (
Company: "Ford",
Modelnumber : "Mustang",
color: "red",
launch-year: 1964
);
)
changeColor = () => (
this.setState((color: "green"));
)
render() (
return (
My (this.state.Company)

Это (this.state.color)
() This.state.Modelnumber
с (this.state.launch-year).


тип = «кнопка»
OnClick = (this.changeColor)
> Изменить цвет велосипеда
);
)
)

В приведенном выше коде мы добавили кнопку, при которой будут отображаться новые изменения в компоненте. Приведенный выше код будет производить следующий вывод при нажатии кнопки.

Выход:

Реквизиты: Реквизиты в ReactJ используются для отправки данных компонентам. Реквизит эквивалентен чисто функциональным параметрам javascript. Поскольку параметры чистой функции не могут быть изменены после назначения, мы не можем изменить их значения. Приведенный ниже пример покажет, как используются реквизиты:

Код:

class Bike extends React.Component (
render() (
return This is (this.props.Companyname)
)
)
const component = ;

class Bike extends React.Component (
render() (
return This is (this.props.Companyname)
)
)
const component = ;

class Bike extends React.Component (
render() (
return This is (this.props.Companyname)
)
)
const component = ;

Выход:

Если у компонента есть конструктор, то объект props должен быть обязательно передан в конструктор с помощью super. Вот пример:

Код:

class Bike extends React.Component (
constructor(props) (
super(props);
)
render() (
return This is a Bike ;
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
)
render() (
return This is a Bike ;
)
)

class Bike extends React.Component (
constructor(props) (
super(props);
)
render() (
return This is a Bike ;
)
)

Выход:

Сравнение лицом к лицу между React State и Props (Инфографика)

Ниже приведены 4 лучших сравнения между React State и Props :

Ключевые различия между React State и Props

Давайте обсудим некоторые из основных ключевых различий между React State и Props :

  1. Реквизиты являются неизменными, то есть их содержимое не может быть изменено после назначения, но состояние - это объект, который используется для хранения данных, которые могут измениться в будущем, а также состояние контролирует поведение компонента после внесения изменения.
  2. И реквизиты, и состояния используются для хранения данных, связанных с компонентом.
  3. Состояния могут использоваться только в компонентах класса, тогда как реквизиты не имеют такого ограничения.
  4. Как правило, реквизиты устанавливаются родительским компонентом, а состояние определяется обработчиками событий, то есть ими управляет сам компонент.
  5. Состояние является локальным для компонента и не может использоваться в других компонентах, тогда как Props позволяет дочерним компонентам считывать значения из родительских компонентов.

Сравнительная таблица React State и Props

В таблице ниже приведены сравнения между React State и Props :

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

Вывод

Изучив свойства как состояния, так и реквизитов, мы пришли к выводу, что всякий раз, когда существует возможность изменения свойств, связанных с компонентом, мы должны отдавать предпочтение состоянию, так как оно позволяет повторную визуализацию свойств. Props, с другой стороны, позволяет дочерним компонентам получать доступ к методам, которые определены в родительских компонентах, что сводит к минимуму необходимость в дочерних компонентах, чтобы иметь свое состояние. Реквизиты доступны только для чтения в дочерних компонентах. Стоит отметить, что состояние и реквизит являются очень важными компонентами архитектуры реагирования.

Рекомендуемые статьи

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

  1. GitHub Интервью Вопросы
  2. Основные отличия - Jira vs Github
  3. Лучшие 19 вопросов интервью ReactJs
  4. Топ 10 видов использования React JS
  5. 11 лучших инструментов React с их особенностями

Категория:

Разработка программного обеспечения