2018-11-18 08:03:50 +00:00
---
title: State vs Props
localeTitle: Состояние vs свойства
---
## Состояние vs свойства
Когда мы начинаем работать с компонентами React, мы часто слышим два термина. Это `state` и `props` . Итак, в этой статье мы рассмотрим, что это такое и как они отличаются.
## Состояние:
* Состояние - это то, что принадлежит компоненту. Он принадлежит к тому конкретному компоненту, где он определен. Например, возраст человека - это состояние этого человека.
* Состояние изменчиво. Н о он может быть изменен только тем компонентом, который им владеет. Поскольку я могу изменить свой возраст, а не кого-либо еще.
* Вы можете изменить состояние, используя `this.setState()`
См. Приведенный ниже пример, чтобы получить представление о состоянии:
2018-11-22 18:49:48 +00:00
2018-11-18 08:03:50 +00:00
#### Person.js
```javascript
2018-11-22 18:49:48 +00:00
2018-11-18 08:03:50 +00:00
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 >
);
}
}
2018-11-22 18:49:48 +00:00
export default Person;
2018-11-18 08:03:50 +00:00
```
2018-11-22 18:49:48 +00:00
В приведенном выше примере `age` - это состояние компонента `Person` .
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
## Props:
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
* Props похожи на аргументы метода. Они передаются компоненту, в котором используется этот компонент.
* Props неизменен. Они доступны только для чтения.
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
См. Пример ниже, чтобы получить представление о props:
2018-11-18 08:03:50 +00:00
#### Person.js
```javascript
2018-11-22 18:49:48 +00:00
import React from 'react';
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
class Person extends React.Component{
render(){
return(
< div >
< label > I am a {this.props.character} person.< / label >
< / div >
);
2018-11-18 08:03:50 +00:00
}
2018-11-22 18:49:48 +00:00
}
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
export default Person;
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
const person = < Person character = "good" > < / Person >
2018-11-18 08:03:50 +00:00
```
2018-11-22 18:49:48 +00:00
В приведенном выше примере `const person = <Person character = "good"></Person>` мы передаем `character = "good"` prop к компоненту `Person` .
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
Это дает результат как «Я хороший человек», действительно это я.
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
Гораздо больше узнать о state и props. Многие вещи можно узнать, фактически погрузившись в кодирование. Так что заставляйте себя программировать.
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
При необходимости вы можете найти меня на [твиттере ](https://twitter.com/getifyJr ) .
2018-11-18 08:03:50 +00:00
2018-11-22 18:49:48 +00:00
Счастливого программирования!!!
2018-11-18 08:03:50 +00:00