React setState问题合集

setState是同步还是异步？

分两种情况
异步：在组件生命周期中或React合成事件里是异步进行操作
同步：在setimeout或者原生dom事件中是属于同步进行

class Demo extends Component{
  constructor(props){
    super(props);
    this.state={
      count:0,
      msg:'测试'
    }
  }
  render(){
      return(
          <h1>{this.state.msg}</h1>
      )
  }
  componentDidMount(){
      this.setState({
        msg:'hello'
      })
    console.log(msg);//此时dom层中是hello，但是打印的时候为测试
  }

}

为什么setState一般在React中使用异步

异步的好处
1.性能效率提高，一次性将所有state值赋予其中再进行render渲染
2.同步的话可能会影响到state和prop不数据不同步

setState如何同步使用？

this.setState({
  msg:'您好！React'
},()=>{
  console.log(msg);//此时打印中的值为您好！React
})

setState中的回调函数相当于Vue中的$nextTick

setState中的值被合并问题

  componentDidMount(){
      this.setState({
        count:this.state.count+1
      })
   this.setState({
        count:this.state.count+1
      })
   this.setState({
        count:this.state.count+1
      })
    console.log(count);//此时打印为1
  }

setState使用了三次count+1，为什么在执行后，值为1呢？

原理
setState的运行方法相当于，object.assign进行赋值
第一次执行：object.assign({},{count:0},{count:1}) 此时值为1
第二次执行：object.assign({},{count:1},{count:1}) 此时值为1
第三次执行：object.assign({},{count:1},{count:1}) 此时值为1

如何才能不被合并进行累加

  componentDidMount(){
      this.setState((prevState,props)=>{
          return(
            count:prevState.count+1
          )
      })
    this.setState((prevState,props)=>{
          return(
            count:prevState.count+1
          )
      })
  this.setState((prevState,props)=>{
          return(
            count:prevState.count+1
          )
      })
    console.log(count);//此时打印为3
  }

此时通过setState内部函数执行，prevState代表上一次的值