解析React丢失this的原因

想过 react 的this为什么会丢失，面试官是否也这样问过你；
自己是否非常的清楚,如果还在模棱两可就赶紧学习下哈～

按照惯例我们还是先看个列子

import react from 'react'
import ReactDOM from 'react-dom'
/*  */
class TextComponents extends react.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: "嘿嘿",
    }
  }
  sendData() {
    console.log('触发啦', this.state.name);
  }
  render() {
    return (
      <div>
        {this.state.name}
        <button onClick={this.sendData}>触发</button>
      </div >
    )
  }
}
const ele = (
  <>
    <TextComponents />
  </>
)
ReactDOM.render(ele, document.getElementById('root'))

当你初学react时候一切看起来都是那么美好，当时现实往往是残酷的；游览器console已经报错了，这时你在去网上寻求答案，发现哦原来是这么解决的（通常使用bind和箭头函数解决），但具体原因可能你并没有了解到； 可能阅读到这，你知道如何去处理去解决这种问题，但不明白具体原因，那么就有由本篇文章替你解决疑惑吧～ 我们再来看个例子

关于this的指向

let obj = {
  name: '嘿嘿',
  Text: function () {
    console.log(this.name);
  }
};
let Text = obj.Text;
Text();
//如果对this指向理解深刻这里就能明白；
解释下，此时这里的调用相当于window.Text();
根据口诀：谁调用指向谁，这里window调用的指向了window

当你明白并理解这个列子我们回头在看,在React中事件发生时调用onClick，但由于onClick它只是中间变量【重点圈起来要考】，所以处理函数中的this指向会丢失，因为真正调用时并不是this.sendData(),如果是这样调用那么this指向就不会有问题。真正调用的是onClick()，而onclick是dom事件，并不是类中的方法，简单可以理解为是在外面的调用，此时的this其实指向的是全局作用域，而全局作用域是没有state.name，所以自然而然地报undefined错误

结束语

希望本篇文章对大家帮助，支持下大大帮忙一键三连，感谢～