React/practise/12.状态修改counter案例.jsx

import React from 'react'

// 通过类组件修改状态的方式
class Counter extends React.Component {
  // 通过 state 定义组件状态
  state = {
    count: 0,
  }

  // 事件回调函数
  changeCount = () => {
    // 修改 state
    // 在 react 体系下，“数据不可变”（就是数据不可以直接通过赋值的方式改变），要用 setState 方法
    this.setState({
      // count 后面的 value 值是在上一次的 count 值 + 1
      count: this.state.count + 1,
    })
  }

  render() {
    return <button onClick={this.changeCount}>{this.state.count}次</button>
  }
}

function App() {
  return (
    <div>
      {/* 渲染 Counter */}
      <Counter />
    </div>
  )
}

export default App