Front-end/react/react原理/7.setState说明.md

setState异步更新(同一方法中多次调用只会render一次),设置值后立即获取,只能获取到原始值 获取最新的state

        this.setState((state,props)=> {
            return {
                count:state.count+1
            }
        })

setState第二个参数作为回调参数,在状态更新,后立即执行.

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>
      )
    }
  }