react学习笔记之setState方法注意事项
2017-06-17 13:49
423 查看
首先我们知道,setState方法用于更新当前组件的state状态值,但调用这个方法后,state并不会立即更新,而是在render方法调用后才会更新,React这么设计的思想是render方法执行时,对state进行批量转变有利于DOM渲染更快。
换句话说,setState方法是异步操作的,并不会阻塞下面的代码执行。
看个例子:
constructor() {
super()
this.state = {
name : "default"
}
}
componentWillMount() {
this.setState({
name : "new"
})
console.log(this.state.name) //"default"
}
render() {
console.log(this.state.name)
}
上面componentWillMount方法执行的打印结果为字符串default,而不是new,和我们预想的并不一样,这说明,setState并不会立即改变state,而是等到render方法执行后再进行改变state,所以下面的render方法中打印的就是“new”。
那么问题来了,很多时候我们需要state状态值改变之后再进行一系列操作,该怎么办呢?其实,setState方法还有第二个参数,接收一个回调函数,在state改变之后进行调用。
看个例子:
componentWillMount() {
this.setState({
name : "new"
}, () => {
console.log(this.state.name) //new
})
}
这样打印结果就符合我们的预期了。
换句话说,setState方法是异步操作的,并不会阻塞下面的代码执行。
看个例子:
constructor() {
super()
this.state = {
name : "default"
}
}
componentWillMount() {
this.setState({
name : "new"
})
console.log(this.state.name) //"default"
}
render() {
console.log(this.state.name)
}
上面componentWillMount方法执行的打印结果为字符串default,而不是new,和我们预想的并不一样,这说明,setState并不会立即改变state,而是等到render方法执行后再进行改变state,所以下面的render方法中打印的就是“new”。
那么问题来了,很多时候我们需要state状态值改变之后再进行一系列操作,该怎么办呢?其实,setState方法还有第二个参数,接收一个回调函数,在state改变之后进行调用。
看个例子:
componentWillMount() {
this.setState({
name : "new"
}, () => {
console.log(this.state.name) //new
})
}
这样打印结果就符合我们的预期了。
相关文章推荐
- Sql server学习笔记 set 注意事项
- 学习笔记---将Asp.Net网站发布到IIS的四种方法及注意事项
- web前台工作笔记(时间戳、js中clone的使用、js中动态填充数据注意事项、前台查错方法的学习)
- 【java基础知识(学习笔记)】--方法的重载注意事项
- react入坑之setState注意事项
- C++学习笔记-类定义的注意事项和C#的区别
- C++ Primer学习笔记:引用的使用注意事项
- ITSM实施方法与注意事项——杜肖辉 (录音和笔记)
- 《黑马程序员》java笔记->【02】关于Static静态方法的一些注意事项
- java学习之类,方法,属性,变量注意事项
- C++学习笔记(二):使用const、static类成员的注意事项
- php学习笔记(三十四)smarty框架的初步使用和注意事项
- 关于SET/GET PARAMETER ID的注意事项,以及取own data中数据的方法
- ASP.NET学习笔记[2] - 关于使用Master.Page的几点注意事项
- PHP类中的魔术方法学习笔记之__set() __get() 等
- jQuery-使用选择器注意事项 学习笔记十
- [学习笔记]寄存器使用注意事项
- 学习笔记---Sql语句的执行步骤及注意事项
- Delphi 2010学习笔记(16)---流程控制的注意事项---2011-01-21
- SQL中like关键字结合SqlParameter使用时的注意事项(学习笔记)