import React from 'react'

class Test extends React.Component {
  handler() {
    // 错误演示
    console.log(this) // 这里的 this 是 undefined
    // this.setState 去修改数据还可以修改数据吗？ 会报错
  }

  render() {
    /* render 函数中的 this 已经被 react 内部做了修正
        这里的 this 就是指向当前的组件实例对象
        函数箭头中的 this 直接沿用，所以也是指向组件的实例对象 */
    console.log('父函数中的 this 指向为：', this)
    return (
      /* 第二种修正方法：
      如果不用 constructor 做修正，直接可以在事件绑定的位置通过箭头函数的写法，直接沿用父函数中的this指向也是可以的 */
      <button onClick={() => this.handler}>click</button>
    )
  }
}

function App() {
  return <Test></Test>
}

export default App