React 组件的 state 和 setState<script src="https://unpkg.com/rea

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React 组件的 state 和 setState</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class Toggle extends React.Component {
        constructor(props) {
          super(props);
          this.state = {isToggleOn: true};
 
          // 这个绑定是必要的，使`this`在回调中起作用
          this.handleClick = this.handleClick.bind(this);
        }
 
        handleClick() {
            console.log(this.state.isToggleOn); //第一次，两次打印的都是 false ,或者都是true
            this.setState(prevState => ({
                isToggleOn: !prevState.isToggleOn
            }));
            console.log(this.state.isToggleOn); //第二次，两次打印的都是 false ,或者都是true

            this.setState({ count: 0 }) // => this.state.count 还是 undefined
            this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN
            this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN       

            this.setState((prevState) => {
                return { count2: 0 }
            })
            this.setState((prevState) => {
                return { count2: prevState.count2 + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
            })
            this.setState((prevState) => {
                return { count2: prevState.count2 + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
            })             
        }
 
        render() {
          return (
            <button onClick={this.handleClick}>
              {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
          );
        }
      }
 
      ReactDOM.render(
        <Toggle />,
        document.getElementById('root')
      );
    </script>
</body>

</html>