06 - react的类组件中的状态state render函数 this指向问题 事件绑定

// 注册事件

import ReactDom from "react-dom"

import { Component } from "react"
// 类组件中的状态 通过 this.state.xxx 来获取状态
class Hello extends Component {
 // 事件对象 event
 handleClick (e) {
  console.log(this)  // udnefiend   使用箭头函数解决this只想 undefined 问题
  console.log(e)  // e.preventDefault() 阻止默认跳转
  console.log('函数也是在类组件里面，也是独立的，别的类组件不能使用此类的函数的')
 }
 // 提供状态
 state = {
  count: 0,
  list: [{
   id: 1,
   name: "迪丽热巴"
  },
  {
   id: 1,
   name: "迪丽热巴"
  },
  {
   id: 1,
   name: "迪丽热巴"
  }
  ],
  isloading: true,
 }
 // render 在类组件是必要的  渲染函数相当于 vue 中的 created 函数 进来组件就会执行 render 函数
 render () {
  console.group("打印分组")
  console.assert(1 === 1)  // 类型断言
  console.table(this.state.list)
  console.log(this)  // 当前组件的实例对象 因为 render 函数是被组件实例调用的 所以render 函数的this只想组件实例 其他函数的this 都是undefiend
  // 怎么解决 === 》》 使用箭头函数
  console.groupEnd()

  console.log(123)
  return (<div>
   {
    // this是当前组件的实例对象
   }
   <h1>计数器{this.state.count}</h1>
   {
    // 绑定事件 click
   }
   <button onClick={this.handleClick}>+1</button>
  </div>
  )
 }
}

// 页面渲染
ReactDom.render(
 <>
  <Hello></Hello>
 </>,
 document.querySelector("#root")
)