React的事件绑定为什么要bind this

Oliver

引入:绑定事件,我们一般怎么写?

在react开发中绑定事件,我们往往用这种方式:
image.png
此时我们发现,this指向了组件实例,符合我们的预期。

去掉bind this会如何?

image.png
可以看到,this指向了window

为什么去掉bind this会这样?

首先要知道,JSX语法实际上是createElement的语法糖

<div>Hello, { this.props.name }</div>
等价于
React.createElement( ‘div’,null, `Hello,${this.props.name}` )

createElement伪代码

function createElement(dom, params) {
  var domObj = document.createElement(dom);
  domObj.onclick = params.onclick;
  domObj.innerHTML = params.conent;
  return domObj
}

可以看到,我们的自定义组件类中onclick绑定的事件,是作为回调函数绑定到domObj.onclick上的。

onclick事件触发

button被点击时,会由React作为中介调用回调函数,此时的this指向丢失,就指向了window

bind this的原理

new关键字

在使用new关键字时,构造函数(即class)中的this都会强制赋值为新的对象。

使用bind将this的值绑定在函数中

除了bind this,还可以使用箭头函数方式

image.png

为什么箭头函数方式不需要bind this

  • 箭头函数内没有this,默认用父级作用域的this。
  • 当使用new关键字时,this指向新对象,同时箭头函数中的this也被赋值为了新对象且永远不会更改指向。
  • 等价于如下形式
//在构造函数内:
let _this = this
funtion fn(){
    console.log(_this)
}
阅读 2.1k

Slow Done, Achieve More.

67 声望
12 粉丝
0 条评论
你知道吗?

Slow Done, Achieve More.

67 声望
12 粉丝
文章目录
宣传栏