85 lines
3.5 KiB
Markdown
85 lines
3.5 KiB
Markdown
|
---
|
|||
|
title: State vs Props
|
|||
|
localeTitle: Государство против реквизита
|
|||
|
---
## Государство против реквизита
|
|||
|
|
|||
|
Когда мы начинаем работать с компонентами React, мы часто слышим два термина. Это `state` и `props` . Итак, в этой статье мы рассмотрим, что это такое и как они отличаются.
|
|||
|
|
|||
|
## Государственный:
|
|||
|
|
|||
|
* Состояние - это то, что принадлежит компоненту. Он принадлежит к тому конкретному компоненту, где он определен. Например, возраст человека - это состояние этого человека.
|
|||
|
* Состояние изменчиво. Но он может быть изменен только тем компонентом, который ему владеет. Поскольку я могу изменить свой возраст, а не кого-либо еще.
|
|||
|
* Вы можете изменить состояние, используя `this.setState()`
|
|||
|
|
|||
|
См. Приведенный ниже пример, чтобы получить представление о состоянии:
|
|||
|
|
|||
|
#### Person.js
|
|||
|
|
|||
|
```javascript
|
|||
|
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
|
|||
|
|
|||
|
```javascript
|
|||
|
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` .
|
|||
|
|
|||
|
Это дает результат как «Я хороший человек», на самом деле я.
|
|||
|
|
|||
|
Гораздо больше узнать о государстве и реквизитах. Многие вещи можно узнать, фактически погрузившись в кодирование. Так что заставляйте свои руки грязно кодировать.
|
|||
|
|
|||
|
При необходимости вытащите меня на [твиттере](https://twitter.com/getifyJr) .
|
|||
|
|
|||
|
Счастливое кодирование !!!
|