57 lines
1.3 KiB
Markdown
57 lines
1.3 KiB
Markdown
|
setState异步更新(同一方法中多次调用只会render一次),设置值后立即获取,只能获取到原始值
|
||
|
|
获取最新的state
|
||
|
|
```html
|
||
|
|
this.setState((state,props)=> {
|
||
|
|
return {
|
||
|
|
count:state.count+1
|
||
|
|
}
|
||
|
|
})
|
||
|
|
```
|
||
|
|
setState第二个参数作为回调参数,在状态更新,后立即执行.
|
||
|
|
```html
|
||
|
|
class StateApp extends React.Component{
|
||
|
|
constructor(){
|
||
|
|
super()
|
||
|
|
this.state= {
|
||
|
|
count:0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onIncrement=()=>{
|
||
|
|
console.info('事件处理this'+this)
|
||
|
|
// this.setState({
|
||
|
|
// count:this.state.count+1
|
||
|
|
// })
|
||
|
|
// this.setState({
|
||
|
|
// count:this.state.count+1
|
||
|
|
// })
|
||
|
|
this.setState((state,props)=> {
|
||
|
|
return {
|
||
|
|
count:state.count+1
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.setState((state,props)=> {
|
||
|
|
return {
|
||
|
|
count:state.count+1
|
||
|
|
}
|
||
|
|
},()=>{
|
||
|
|
console.log('状态更新后回调函数',this.state.count)//4
|
||
|
|
console.log(document.getElementById('root').innerText)
|
||
|
|
})
|
||
|
|
console.info(this.state.count)///2
|
||
|
|
}
|
||
|
|
render(){
|
||
|
|
return (
|
||
|
|
<div>有状态组件,{this.state.count}
|
||
|
|
<button onClick={this.onIncrement}>+1</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|