131 lines
5.2 KiB
Markdown
131 lines
5.2 KiB
Markdown
---
|
||
title: State
|
||
localeTitle: состояние
|
||
---
|
||
# состояние
|
||
|
||
Состояние - это место, откуда поступают данные.
|
||
|
||
Мы всегда должны стараться максимально упростить наше состояние и свести к минимуму количество компонентов состояния. Если у нас есть, например, десять компонентов, которым нужны данные из состояния, мы должны создать один компонент контейнера, который будет сохранять состояние для всех из них.
|
||
|
||
Состояние в основном похоже на глобальный объект, доступный везде в компоненте.
|
||
|
||
Пример компонента Stateful Class:
|
||
|
||
```javascript
|
||
import React from 'react';
|
||
|
||
class App extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
|
||
// We declare the state as shown below
|
||
|
||
this.state = {
|
||
x: "This is x from state",
|
||
y: "This is y from state"
|
||
}
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
<h1>{this.state.x}</h1>
|
||
<h2>{this.state.y}</h2>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default App;
|
||
```
|
||
|
||
Другой пример:
|
||
|
||
```javascript
|
||
import React from 'react';
|
||
|
||
class App extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
|
||
// We declare the state as shown below
|
||
this.state = {
|
||
x: "This is x from state",
|
||
y: "This is y from state"
|
||
}
|
||
}
|
||
|
||
render() {
|
||
let x1 = this.state.x;
|
||
let y1 = this.state.y;
|
||
|
||
return (
|
||
<div>
|
||
<h1>{x1}</h1>
|
||
<h2>{y1}</h2>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default App;
|
||
```
|
||
|
||
## Состояние обновления
|
||
|
||
Вы можете изменить данные, хранящиеся в состоянии вашего приложения, используя метод `setState` на вашем компоненте.
|
||
|
||
```js
|
||
this.setState({ value: 1 });
|
||
```
|
||
|
||
Имейте в виду, что `setState` является асинхронным, поэтому вы должны быть осторожны при использовании текущего состояния для установки нового состояния. Хорошим примером этого может быть, если вы хотите увеличить значение в своем состоянии.
|
||
|
||
#### Неправильный путь
|
||
|
||
```js
|
||
this.setState({ value: this.state.value + 1 });
|
||
```
|
||
|
||
Это может привести к непредвиденному поведению в вашем приложении, если код выше вызывается несколько раз в том же цикле обновлений. Чтобы этого избежать, вы можете передать функцию обратного вызова `setState` для `setState` вместо объекта.
|
||
|
||
#### Правильный путь
|
||
|
||
```js
|
||
this.setState(prevState => ({ value: prevState.value + 1 }));
|
||
```
|
||
|
||
## Состояние обновления
|
||
|
||
Вы можете изменить данные, хранящиеся в состоянии вашего приложения, используя метод `setState` на вашем компоненте.
|
||
|
||
```js
|
||
this.setState({value: 1});
|
||
```
|
||
|
||
Имейте в виду, что `setState` может быть асинхронным, поэтому вы должны быть осторожны при использовании текущего состояния для установки нового состояния. Хорошим примером этого может быть, если вы хотите увеличить значение в своем состоянии.
|
||
|
||
##### Неправильный путь
|
||
|
||
```js
|
||
this.setState({value: this.state.value + 1});
|
||
```
|
||
|
||
Это может привести к непредвиденному поведению в вашем приложении, если код выше вызывается несколько раз в том же цикле обновлений. Чтобы этого избежать, вы можете передать функцию обратного вызова `setState` для `setState` вместо объекта.
|
||
|
||
##### Правильный путь
|
||
|
||
```js
|
||
this.setState(prevState => ({value: prevState.value + 1}));
|
||
```
|
||
|
||
##### Чистый путь
|
||
```
|
||
this.setState(({ value }) => ({ value: value + 1 }));
|
||
```
|
||
|
||
Если требуется только ограниченное количество полей в объекте состояния, для очистки кода может использоваться уничтожение объекта.
|
||
|
||
### Больше информации
|
||
|
||
* [Реакция - состояние и жизненный цикл](https://reactjs.org/docs/state-and-lifecycle.html)
|
||
* [Реакция - подъемное положение вверх](https://reactjs.org/docs/lifting-state-up.html)
|
||
* [React Native - State Up](https://facebook.github.io/react-native/docs/state.html) |