08-react修改state数据驱动视图UI的更新【注意和vue的区别】

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

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

import ReactDom from "react-dom"

import { Component } from "react"

// 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, // this.state.count++ 是不可以的 这是直接修改当前值了 
   // 数组的push 等方法也不能使用 都是修改当前数组了
   list: [...this.state.list, 123],  // 这样就不会直接修改 this.state.list and 重新给list赋值
   // 数组方法中只要直接修改原数组的方法都不能使用
   // 修改对象的方式 name 是要修改的属性 后面的name属性就会覆盖原来的name属性从而达到目的【驱动视图】
   persion: {
    ...this.state.persion,
    name: "router"
   }
  })
 }
 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"))

setState的修改数据并能驱动视图的原理：

　　1. 重写state的数据，进行了覆盖

　　2. 修改完成后会立即调用render函数渲染页面UI