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

Posted 2020-11-26 iwishicould

 

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