React中setState的用法
在React中修改state不可以直接修改，要使用setState。下面是setState的使用方法。
1 setState是同步还是异步
- 在合成事件或者生命周期中是异步的
- 在setTimeout或者原生事件和setState回调函数时是同步的
<button onClick={this.setCounter}>{counter}</button>
setCounter = () => {
this.changeValue(1)
}
changeValue = (v) => {
this.setState({
counter: this.state.counter + v
})
console.log(this.state.counter)
}
则打印的counter永远比真实的少1.因为在合成事件中setState是异步执行的。 同理在生命周期中也是同样的效果
下列是同步的事件：
setTimeout:
setCounter = () => {
setTimeout(() => {
this.changeValue(1)
},0)
console.log(this.state.counter)
}
原生事件：
<button id="test">原生事件{counter}</button>
doucument.getElementById('test').addEventListener('click', this.setCounter)
steState回调事件，是state更新之后才执行的操作
this.setState({
counter: this.state.counter + v
},
() => {
console.log(this.state.counter)
)
上述三种都属于同步的，打印的counter都是执行后的准确的
2 state批量更新
state更新时批量的，原因是优化性能，多个state批量更新。 例如：
this.changeValue(1)
this.changeValue(2)
这种情况实际上只会执行changeValue(2)
要想实现链式调用需要接收一个函数
this.setState(state => {
return {
counter: this.state.counter + v
}
})
