<div id="wrapper"></div>
<script type="text/babel">

  class LikeButton extends React.Component {
    constructor () {
      super()
      this.state = {
        name: 'Tomy',
        isLiked: false
      }
    }

    handleClickOnLikeButton () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    handleClickOnLikeButton2 () {
      console.log(this.state.isLiked)
      this.setState({
        isLiked: !this.state.isLiked
      })
      console.log(this.state.isLiked)

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

    handleClickOnLikeButton3 () {
      this.setState((prevState) => {
        console.log(prevState)
        return { count: 0 }
      })
      this.setState((prevState) => {
        console.log(prevState)
        return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
      })
      this.setState((prevState) => {
        console.log(prevState)
        return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
      })
      // 最后的结果是 this.state.count 为 3
    }
    render () {
      return (
        <div>
          <button onClick={this.handleClickOnLikeButton.bind(this)}>
            {this.state.isLiked ? '取消' : '点赞'} 👍 {this.state.name}
          </button>
          <button onClick={this.handleClickOnLikeButton2.bind(this)}>
            {this.state.isLiked ? '取消' : '点赞'} 👍 {this.state.name} 2
          </button>
          <button onClick={this.handleClickOnLikeButton3.bind(this)}>
            {this.state.isLiked ? '取消' : '点赞'} 👍 {this.state.name} 3
          </button>
        </div>
      )
    }
  }
  class Index extends React.Component {
    render () {
      return (
        <div>
          <LikeButton />
        </div>
      )
    }
  }
  const container = document.getElementById('wrapper');
  const root = ReactDOM.createRoot(container);
  root.render(<Index />)
</script>