07 - react 唯一修改state状态的方式 setState

// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变

// setState 的原理：修改玩状态之后会调用 render 函数

import ReactDom from "react-dom"

import { Component } from "react"

class App extends Component {
 // 自增函数
 addFn () {
  console.log(123)
  // 不要直接修改 state 的状态 是无效的
  this.state.a = 12
  console.log(this.state.a)
  this.setState({
   count: this.state.count + 1
  })
 }
 state = {
  count: 10,
  a: 1,
 }
 render () {
  return (<div>
   <h1>计数器:{this.state.count}</h1>
   {
    // bind 绑定当前的this 然后返回新的函数
    // 或者使用箭头函数 因为箭头函数本身没有this 使用父级的this指向
   }
   <button onClick={this.addFn.bind(this)}>加一</button>
  </div >)
 }
}
// 把租价渲染到页面
ReactDom.render(<App />, document.querySelector("#root"))

直接修改state的值，页面并不会自动更新UI ；