3.5 KiB
title | localeTitle |
---|---|
State vs Props | Государство против реквизита |
Государство против реквизита
Когда мы начинаем работать с компонентами React, мы часто слышим два термина. Это state
и props
. Итак, в этой статье мы рассмотрим, что это такое и как они отличаются.
Государственный:
- Состояние - это то, что принадлежит компоненту. Он принадлежит к тому конкретному компоненту, где он определен. Например, возраст человека - это состояние этого человека.
- Состояние изменчиво. Но он может быть изменен только тем компонентом, который ему владеет. Поскольку я могу изменить свой возраст, а не кого-либо еще.
- Вы можете изменить состояние, используя
this.setState()
См. Приведенный ниже пример, чтобы получить представление о состоянии:
Person.js
import React from 'react';
class Person extends React.Component{
constructor(props) {
super(props);
this.state = {
age:0
this.incrementAge = this.incrementAge.bind(this)
}
incrementAge(){
this.setState({
age:this.state.age + 1;
});
}
render(){
return(
<div>
<label>My age is: {this.state.age}</label>
<button onClick={this.incrementAge}>Grow me older !!<button>
</div>
);
}
}
export default Person;
В приведенном выше примере age
- это состояние компонента Person
.
Реквизит:
- Опоры похожи на аргументы метода. Они передаются компоненту, в котором используется этот компонент.
- Реквизит неизменен. Они доступны только для чтения.
См. Пример ниже, чтобы получить представление о реквизитах:
Person.js
import React from 'react';
class Person extends React.Component{
render(){
return(
<div>
<label>I am a {this.props.character} person.</label>
</div>
);
}
}
export default Person;
const person = <Person character = "good"></Person>
В приведенном выше примере const person = <Person character = "good"></Person>
мы передаем character = "good"
prop к компоненту Person
.
Это дает результат как «Я хороший человек», на самом деле я.
Гораздо больше узнать о государстве и реквизитах. Многие вещи можно узнать, фактически погрузившись в кодирование. Так что заставляйте свои руки грязно кодировать.
При необходимости вытащите меня на твиттере .
Счастливое кодирование !!!