关于react中setState的深入理解

在react中，通常通过state或props，来控制整个组件的状态。一旦state或props发生改变，整个组件会被重新渲染。在setState的理解上，可能会存在一些误区。

setState的基本使用（对象形式）

一般使用方法是传入对象

this.setState({
    total: 0
})
复制代码

setState的基本使用（函数形式）

也可以使用函数的形式，第一个参数是之前的state状态对象，第二个参数是props

 this.setState((prevState, props) => ({
    total: prevState.total + 1
 }))
复制代码

setState不能保证是同步的，即在有些情况下会是异步的，比如在setState之后去获取this.state，并不会得到更新后的值，而是返回之前的值。针对这种情况，可以采用下面两种方式解决

setState添加回调函数

this.setState({
  total: 10
}, this.showTotal)

showTotal(){
    console.log(this.state.total) // 这里可以获取到更新值
}
复制代码

更新方法添加setTimeout

this.setState({
  total: 10
})

setTimeout(this.showTotal, 0);

showTotal(){
    console.log(this.state.total) // 这里可以获取到更新值
}
复制代码

总结，并不是所有的组件状态都应该用setState进行管理。用setState进行管理会造成很多不需要的重新渲染，相关的生命周期钩子一直被调用等。 和渲染无关的状态尽量不要放在 state 中来管理，可以直接以属性的形式保存在组件中