131 lines
3.1 KiB
Markdown
131 lines
3.1 KiB
Markdown
---
|
||
title: State
|
||
localeTitle: 州
|
||
---
|
||
# 州
|
||
|
||
State是数据来源的地方。
|
||
|
||
我们应该总是尽量使我们的状态尽可能简单，并尽量减少有状态组件的数量。例如，如果我们有10个需要来自州的数据的组件，我们应该创建一个容器组件来保持所有这些组件的状态。
|
||
|
||
State基本上就像一个组件中随处可用的全局对象。
|
||
|
||
有状态类组件的示例：
|
||
|
||
```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`而不是对象。
|
||
|
||
#### 正确的方式
|
||
|
||
```js
|
||
this.setState(prevState => ({ value: prevState.value + 1 }));
|
||
```
|
||
|
||
## 更新国家
|
||
|
||
您可以使用组件上的`setState`方法更改存储在应用程序状态中的数据。
|
||
|
||
```js
|
||
this.setState({value: 1});
|
||
```
|
||
|
||
请记住， `setState`可能是异步的，因此在使用当前状态设置新状态时应该小心。一个很好的例子就是你想在你的州增加一个值。
|
||
|
||
##### 错误的方法
|
||
|
||
```js
|
||
this.setState({value: this.state.value + 1});
|
||
```
|
||
|
||
如果在同一更新周期中多次调用上述代码，则可能会导致应用程序出现意外行为。为避免这种情况，您可以将更新程序回调函数传递给`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) |