React事件处理函数this指向解析
2017-11-24 本文已影响0人
txwslyf
我们知道，由于浏览器的工作原理，事件处理函数当中的this都是指向当前的绑定了事件处理函数的DOM节点对象。但是一般在开发过程中我们都需要其内部的this指向的应该是这个组件的实例本身。常用的有以下三种方法：
方法一
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
console.log(this.value)
}
render () {
return <div>
<button onClick={this.handleClick}>点我</button>
</div>
}
}
这种方法是由我们在构造函数中手动为事件处理函数硬绑定this。
方法二
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
}
handleClick () {
console.log(this.value)
}
render () {
return <div>
<button onClick={this.handleClick.bind(this)}>点我</button>
</div>
}
}
这种方法其实和第一种应该是一样的，只不过绑定的位置发生了变化而已。
方法三
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
}
handleClick (e) {
console.log(e)
console.log(this.value)
}
render () {
return <div>
<button onClick={(e) => {
this.handleClick(e)
}}>点我
</button>
</div>
}
}
第三种方法运用的是箭头函数内部this不可变性 (不可变性不是指箭头函数内部的 this永远指向一致，而是指其内部的 this永远指向箭头函数被定义时外部最近的 this。
在这种情况下，由于事件处理函数是一个箭头函数，那没箭头函数内部的this指向就不可以被改变了，this指向离箭头函数最近的外部this，而render()方法中的this由于react的自动绑定机制，this指向实例本身，所以箭头函数的this也指向实例本身。而this.handleClick()这种调用方式其实和handleClick.apply(this)是等效的，所以这种写法也可以。
ES7的写法
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
}
handleClick = (e) => {
console.log(e)
console.log(this.value)
}
render () {
return <div>
<button onClick={this.handleClick}>点我</button>
</div>
}
}
不过，在Class中直接赋值是ES7的写法(其实和下面的写法等价)，ES6并不支持，只用ES6的话可以用下面写法
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
this.handleClick = (e) => {
console.log(e)
console.log(this.value)
}
}
render () {
return <div>
<button onClick={this.handleClick}>点我</button>
</div>
}
}
总结
介绍了五种写法，总的来说可以分为两类，前三种是一类，后两种算一类。这两类最大的区别就是前者的事件处理函数是定义在类的原型之上，实现了代码的复用。而后者的事件处理函数是作为实例属性，每个类的实例在实例化时都需要定义一遍事件处理函数。
