为什么 setState() 在重复调用期间不响应更新 state？

Question

I've started learning react using the official documentation came across this "React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state." Upon practicing, i came across this problem, which i assume is in some way tied to this, but i still don't understand why snippet(1) doesn't work and snippet(2) does.

   //  code-snippet(1)

    import React from "react";
    import ReactDOM from 'react-dom';
    import "./styles.css";
    class Count extends React.Component {
      constructor(props) {
        super(props);
        this.state = {count : 0};
      }
      increment() {
        var newCount = state.count + 1;
        this.setState({count: newCount});
      }
      increment5() {
        this.increment();
        this.increment();
        this.increment();
        this.increment();
        this.increment();
      }
      render() {
        return (
        <div>
          <h1>Count - {this.state.count}</h1>
          <button onClick={() => this.increment5()}>Increment</button>
        </div>
        );
      }
    }
     ReactDOM.render(<Count />, document.getElementById("root"));


//   code-snippet(2)

     import React from "react";
        import ReactDOM from 'react-dom';
        import "./styles.css";
        class Count extends React.Component {
          constructor(props) {
            super(props);
            this.state = {count : 0};
          }
          increment() {
            this.setState(function(state) {
              var newCount = state.count + 1;
              return {count : newCount};
            });
          }
          increment5() {
            this.increment();
            this.increment();
            this.increment();
            this.increment();
            this.increment();
          }
          render() {
            return (
            <div>
              <h1>Count - {this.state.count}</h1>
              <button onClick={() => this.increment5()}>Increment</button>
            </div>
            );
          }
        }
         ReactDOM.render(<Count />, document.getElementById("root"));

Answer 1

I think if you just add "this" in the increment method of your first snippet it would work perfectly:

 increment() {
    var newCount = this.state.count + 1; //you forgot the this keyword on this line
    this.setState({count: newCount});
  }

Answer 2

Since setState works in an asynchronous way. That means after calling setState the this.state variable is not immediately changed. so if you want to perform an action immediately after setting state the state may have the older value so that second state update may not regarde the previous state value.

As in the second script the callback function will always use the last state value that's why the second approach is working without any issue.

And also you are missing the this keyword in this keyword in the first snipped.