由于react状态不可变,所以在react中不要直接修改 state 中的值,这是无效的!
例如:
语法:this.setState({ 要修改的部分数据 })
setState() 作用:1 修改 state 2 更新 UI
例如:
setState 是哪来的?
从 Component 父类继承过来的
// 只要是数组中直接修改当前数组的方法都不能用!
this.state.list.push(123) // 错误
// 正确
this.setState({
list: [...this.state.list, 4],
})
this.state.obj.name = 'haha' //错误
// 正确
this.setState({
obj: {
...this.state.person,
// 要修改的属性,会覆盖原来的属性,这样,就可以达到修改对象中属性的目的了
name: '嘻嘻'
}
})
setState推荐语法
setState((prevState) => {})
参数 prevState:表示上一次 setState
更新后的状态
this.setState((prevState) => {
return {
count: prevState.count + 1
}
})
setState进阶-同步
- setState如果是在react的生命周期中或者是事件处理函数中,表现出来为:延迟合并更新(“异步更新”)
- setState如果是在setTimeout/setInterval或者addEventListener声明原生事件中,表现出来是:立即更新(“同步更新”)
- 但是setState是同步更新的