### React 中
setState 的用法及示例
React 中的 `
setState` 是一个核心方法，用于更新组件的状态。状态的更新会触发重新渲染，从而确保用户界面与数据保持一致。以下是关于 `
setState` 的详细
说明和使用示例：
#### 1
. 对象形式的
setState
最简单的 `
setState` 使用方式是通过对象直接更新状态值。这种方式适用于不需要依赖当前状态或属性的情况。
```javascript
this
.setState({ count: 0 });
```
这种方式简单明了，但需要注意的是，如果新状态依赖于当前状态，则可能引发问题[^2]。
#### 2
. 函数形式的
setState
当新状态需要基于当前状态或属性计算时，推荐使用函数形式的 `
setState`。函数接收两个参数：`prevState` 和 `props`，分别表示上一次的状态和当前的属性。
```javascript
this
.setState((prevState, props) => {
return { count: prevState
.count + 1 };
});
```
这种方式可以确保状态更新的顺序正确，避免因异步特性导致的错误[^2]。
#### 3
. 异步特性与回调函数
`
setState` 是异步的，这意味着在调用后立即访问 `this
.state` 可能不会反映最新的状态值。为了解决这一问题，可以在 `
setState` 的第二个参数中传入一个回调函数，在状态更新完成后执行特定逻辑。
```javascript
this
.setState({ isShow: true }, () => {
this
.txtRef
.current
.focus(); // 确保在状态更新后执行操作
});
```
这种模式在需要同步某些操作（如聚焦输入框）时非常有用[^1]。
#### 4
. async/await 的写法
虽然 `
setState` 本身是异步的，但可以通过 `async/await` 的语法简化代码逻辑。注意，`await` 后必须是一个返回 Promise 的 `
setState` 调用。
```javascript
async componentDidMount() {
await this
.setState({ count: this
.state
.count + 1 });
console
.log(this
.state
.count); // 输出 2
}
```
这种方法可以提高代码的可读性，但在实际项目中需谨慎使用，因为频繁的 `await` 可能会影响性能[^3]。
#### 5
. 批量更新状态
多次调用 `
setState` 时，React 会将它们批量处理以优化性能。例如：
```javascript
update2 = () => {
this
.setState((state) => ({ count: state
.count + 1 }), () => {
console
.log(this
.state
.count);
});
this
.setState((state) => ({ count: state
.count + 1 }), () => {
console
.log(this
.state
.count);
});
this
.setState((state) => ({ count: state
.count + 1 }), () => {
console
.log(this
.state
.count);
});
};
```
上述代码最终输出为 `3 3 3`，因为每个 `
setState` 都会在前一个状态的基础上进行计算[^4]。
### 示例代码
以下是一个完整的示例，展示了如何使用 `
setState` 更新状态并触发回调：
```javascript
import React, { Component } from 'react';
export default class App extends Component {
constructor(props) {
super(props);
this
.state = { count: 0 };
}
increment = () => {
this
.setState((prevState) => ({
count: prevState
.count + 1,
}));
};
render() {
return (
<div>
<h1>Count: {this
.state
.count}</h1>
<button onClick={this
.increment}>Increment</button>
</div>
);
}
}
```
### 注意事项
- `
setState` 是异步的，因此不能直接在调用后立即访问 `this
.state`。
- 如果新状态依赖于旧状态，请始终使用函数形式的 `
setState`。
- 在复杂场景下，可以结合回调函数或 `async/await` 来确保逻辑的正确性。
博客介绍了React中setState的相关知识，setState是异步更新，用箭头函数可获取最新state和props，其第二个参数是更新后执行的回调函数，作用是修改state和更新UI。父组件更新时，可用shouldComponentUpdate判断子组件是否更新，避免不必要渲染。
扫一扫
1104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
