码迷,mamicode.com
首页 > 其他好文 > 详细

React 中this.setStat是批量执行的, 它发现做三次是多余的,所以只执行一次

时间:2019-12-01 18:39:37      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:获取   test   mount   ret   xtend   turn   component   rom   from   

 

16==》 this.setStat是批量执行的  它发现做三次是多余的,所以只执行一次
import React, { Component } from "react";

export default class StaTest extends Component {
  state = {
    nun: 1
  };

  componentDidMount() {
    //  this.setStat是批量执行的  它发现做三次是多余的,所以只执行一次
    this.setState({
      nun: this.state.nun + 1
    });

    this.setState({
        nun: this.state.nun + 1
    });

    this.setState({
        nun: this.state.nun + 1
    });
  }

  render() {
    return (
      <div>
        {/* 获取state中的值  最终为2*/}
        {this.state.nun}
      </div>
    );
  }
}

 

如何让他执行三次
更改为this.setState

    this.setState(prevState=>{
        return{
            nun:prevState.nun+1
        }
    })

      this.setState(prevState => {
          return {
              nun: prevState.nun + 1
          }
      })

      this.setState(prevState => {
          return {
              nun: prevState.nun + 1
          }
      })

      可以优化为
      this.setState(prevState => ({
          nun: prevState.nun + 1
      }))

 

React 中this.setStat是批量执行的, 它发现做三次是多余的,所以只执行一次

标签:获取   test   mount   ret   xtend   turn   component   rom   from   

原文地址:https://www.cnblogs.com/IwishIcould/p/11966795.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!