React setState使用注意事项

最新推荐文章于 2024-10-16 09:32:06 发布

codezha

最新推荐文章于 2024-10-16 09:32:06 发布

阅读量372

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/codezha/article/details/89496043

react 专栏收录该内容

6 篇文章

订阅专栏

本文详细解析了React中setState的使用注意事项，包括避免直接修改state、如何正确更新state、理解setState的异步特性以及如何在复杂状态更新时保持性能。通过实例对比，帮助开发者掌握最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setState使用注意事项

不要直接改变state

直接对组件state中的属性赋值将不会触发DOM更新，react不知道state被改变了

state的更新可能是异步的

react会一次处理多个对setState的调用，从而提高性能，修正方式如下：

调用setState的时候传入一个函数，而不是一个对象

//错误用法
this.setState({val:this.state.val + this.props.increment});
//正确用法
this.setState((prevState, props) => {
    val:prevState.val + props.increment
});

setState是对象的合并而不是替换
- 当需要更新对象的时候，可以使用ES6展开运算符展开原来的对象，与新的的对象合并
```
this.setState({...prevObj,newObj})
```
- 当需要更新的数据量比较多，必须更新数组，可以新建一个临时变量，操作完临时变量之后，调用this.setState()
```
let arr = this.state.arr;
for(let i=0;i<tempArr.length;i++){
    //遍历数组，操作数组中的值
}
//等价于this.setState({arr:arr});
this.setState({arr});
```