【React】: React的生命周期

class App5 extends React.Component
{
  constructor(props)
  {
    super(props)

    console.warn("生命周期钩子函数：constructor")
  }

  componentDidMount()
  {
    console.warn("生命周期钩子函数：componentDidMount")
  }

  render()
{
  console.warn("生命周期钩子函数：render")
  return (
<div>
<h3></h3>
<h1>统计豆豆被打的次数：</h1>
<button id='btn'>打豆豆</button>
</div>

  )
}
}

ReactDOM.render(<App5/>,document.getElementById('root9'))

class AppThree extends React.Component
{

  state={
    count:0
  }

  //组件当中的state，可以通过this.state来进行调用
  //使用setState，来修改数据，直接使用this.state.count+1,来修改是行不通的
  //备注：如果直接使用事件抽离的方法，把render函数当中的逻辑抽离出来，但是在当前class的其他
  //的函数当中，是无法调用到this的。 因此在其他函数中无法调用this.setState是肯定的。

  render(){
    return (
      <div>
        <h1>计数器</h1>

        <button onClick={() => {
          this.setState({
            count:this.state.count+1
          })

        } }>
        +1</button>
        <div>这是一个有状态组件当中的数据count。{this.state.count}</div>
      </div>
    )
  }
 
}

class AppSix extends React.Component
{


  state={
    count:0
  }

  onIncrement = () => 
  {
    this.setState({
      count:this.state.count+1
    })
  }

  render(){
    return (
      <div>
        <h1>计数器</h1>
        {/*在react当中，onclick方法都需要用花括号括起来，再来表示其中的方法，这里的箭头函数可以直接实现调用，只是没有对这个箭头函数
        进行命名，也就是令 hello = () => this.onIncrement(),是否命名都一样的
        */}
        <button onClick={this.onIncrement}>+1</button>
    )
  }
 
}


ReactDOM.render(<AppSix />, document.getElementById('event_six'))