开发者学堂课程【React 入门与实战:this.setState 的两个注意点】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/585/detail/8118
this.setState 的两个注意点
目录
一、注意点一
二、注意点二
export default class BindEvent extends React. Component {
constructor(){
super()
this.state = {
msg:
‘哈哈'
}
现在只为 state 绑定了 msg,再来一个:
name :
‘zs’
age: 22,
gender :
‘男’
保存后会发现页面没有任何触发,点击 button 按钮会调用 show 方法,在 show 方法内部需要为 msg 重新赋值:
this.setState({msg: '123' +arg1 + arg2}
)
一、注意点1:
当前在 setState 只提供了 msg 没有提供其他的,调用完 setstate 状态都存在。
此时,根据上图结果显示,可以得出一个结论,在 setState 中只会把对应的 state 状态更新;而不会覆盖其他的 state 状态。
调用完 SetState, msg 是最新的状态,如果想立即 console 最新的 msg 的值应该:
console.log(this.state.msg)
此时在 console 里还是哈哈,因为 this.setState 没有执行完,console.log(this.state.msg)
就已经执行了。
二、注意点二:
this.setState 方法的执行,是异步的;
如果大家在调用完 this.setState 之后,又想立即拿到最新的 state 值,需要使用:
this.setState({ }, callback)
所以写入:
在 setState,
msg: '123' + arg1 + arg2
}
,function(){ //回调
console.log(this.state.msg)
}
)
设置完毕后会执行这个文件,在回调里是最新的。