react学习笔记之setState方法注意事项

首先我们知道，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

})

}

这样打印结果就符合我们的预期了。