React拓展学习——类组件中的this指向

学习目标：理解this的指向，并能进行this指向的修正

1、不使用箭头函数

        我们在写类组件的时候，事件处理函数通常是写成箭头函数的形式，如果不写成箭头函数，那么会发生什么呢？

import React,{Component} from "react";

// 创建类组件
class Hello extends Component{
  state={
    text:'hello'
  }
 
  handleClick(){
    console.log(this)
    this.setState({
      text:'刷我滴卡'
    })
  }

  render(){
    return(
      <>
        <p onClick={this.handleClick}>{this.state.text}</p>
      </>
    );
  }
}

 得到的结果：this指向的是undefined，如果我们要使用this.setState({})的话，就会报错

2、修正this指向的方法

（1）constructe函数，强行绑定this

constructor(){
    super()
    this.handleClick=this.handleClick.bind(this)
  }

（2）绑定时用箭头函数的写法

 <p onClick={()=>this.handleClick()}>{this.state.text}</p>

原因：这里的this沿用父函数的this，而这里的父函数就是render，React的render的this就是指向当前组件实例对象