看一下例子:
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
}
- 利用箭头函数自动获取上下文this的特性,
class App extends React.Component{
constructor(){
}
add=()=>{ //1
console.log(this)
}
return (<div onClick={()=>this.add()}></div>) //2
//undefined
}
在监听事件时不管是手动绑定this或依赖箭头函数,都存在多次渲染时,会创建不同的回调函数.在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。
