看一下例子:

class App extends React.Component{
      constructor(){
          
      }
      add(){
            console.log(this)
      }
      return (<div onClick={this.add}></div>) 
      //undefined
}

这里可以看出react中的this是在不手动绑定的情况下,值是undefined.其实究其原因在于class中对this的处理方式:class中原型或静态方法在不绑定this的情况下,强制为undefined,这里可以看下例子:

class A {
      b(){ 
            return this
      }
}
let c = new A()
console.log(c.b())//A()
let d = c.b
console.log(d())//undefined

这里绑定this的操作在于new运算符,new创建了一个新的对象c,并把该对象的原型链接到class A上,然后将c作为this的上下文

class实际上就是function的语法糖,上面的例子我们可以用函数来改写一下

 function A(){}
A.prototype.b = function(){return this}
let c= new A()
console.log(c.b())//A()
let d = c.b
console.log(d())//global objject -->window

这里之所以是为全局对象不为undefined是因为class内部自动实行严格模式,在严格模式下,如果没有指定this的话它值是undefined;而在上面的function例子中非严格模式下,this指向的是全局对象,而在浏览器(BOM)中全局对象为window,所以this指向window

如何解决react中this的指向问题呢

1.手动绑定this
在构造函数constructor内绑定this 或 在监听事件时绑定this

class App extends React.Component{
     constructor(){
       this. add = this.add.bind(this) //1
     } 
     return (<div onClick={this.add.bind(this)}></div>)  //2
}

2. 利用箭头函数自动获取上下文this的特性,

class App extends React.Component{
      constructor(){
          
      }
      add=()=>{ //1
            console.log(this)
      }
      return (<div onClick={()=>this.add()}></div>) //2
      //undefined
}

在监听事件时不管是手动绑定this或依赖箭头函数,都存在多次渲染时,会创建不同的回调函数.在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

参考

MDN文档 class
MDN文档 bind
React官方文档