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

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

在react开发中绑定事件,我们往往用这种方式:
React的事件绑定为什么要bind this_第1张图片
此时我们发现,this指向了组件实例,符合我们的预期。

去掉bind this会如何?

React的事件绑定为什么要bind this_第2张图片
可以看到,this指向了window

为什么去掉bind this会这样?

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

Hello, { this.props.name }
等价于 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,还可以使用箭头函数方式

React的事件绑定为什么要bind this_第3张图片

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

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

你可能感兴趣的