美文网首页
React setState问题合集

React setState问题合集

作者: 弦生_a3a3 | 来源:发表于2022-05-08 17:21 被阅读0次

    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代表上一次的值

    相关文章

      网友评论

          本文标题:React setState问题合集

          本文链接:https://www.haomeiwen.com/subject/etpqurtx.html