this.setState 的两个注意点|学习笔记

简介: 快速学习 this.setState 的两个注意点

开发者学堂课程【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 :‘男’

image.png

保存后会发现页面没有任何触发,点击 button 按钮会调用 show 方法,在 show 方法内部需要为 msg 重新赋值:

this.setState({msg: '123' +arg1 + arg2}


一、注意点1

当前在 setState 只提供了 msg 没有提供其他的,调用完 setstate 状态都存在。

image.png

此时,根据上图结果显示,可以得出一个结论,在 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)

}

设置完毕后会执行这个文件,在回调里是最新的。

相关文章
|
2月前
|
前端开发
在 componentWillMount 中调用 setState 会发生什么
在 `componentWillMount` 生命周期方法中调用 `setState` 会导致组件在初始渲染前进行额外的状态更新和重新渲染,可能影响性能并引发潜在的逻辑问题。建议避免在这种情况下使用 `setState`。
|
8月前
setState 和 replaceState 的区别
setState 和 replaceState 的区别
59 2
|
8月前
|
前端开发
setState和repalceState的区别
setState和repalceState的区别
68 0
|
8月前
|
前端开发
说说React中setState和replaceState的区别?
在 React 中,setState()和 replaceState()是用于更新组件状态的两个方法。它们之间有一些区别
58 0
|
8月前
|
前端开发
React中setState方法详细讲解
React中setState方法详细讲解
|
JavaScript 前端开发
setState总结
setState总结
56 1
|
8月前
|
前端开发
【React学习】—SetState的使用(九)
【React学习】—SetState的使用(九)
|
前端开发
setState异步问题
setState异步问题
65 0
|
前端开发
React setState执行两次的问题
React setState执行两次的问题解决修复。
455 1
React setState执行两次的问题
|
前端开发 算法
调用setState后发生了什么?
调用setState后发生了什么?
214 0