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)
|