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

引入：绑定事件，我们一般怎么写？

在react开发中绑定事件，我们往往用这种方式：

此时我们发现，this指向了组件实例，符合我们的预期。

去掉bind this会如何？

可以看到，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，还可以使用箭头函数方式

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

• 箭头函数内没有this，默认用父级作用域的this。
• 当使用new关键字时，this指向新对象，同时箭头函数中的this也被赋值为了新对象且永远不会更改指向。
• 等价于如下形式

//在构造函数内：
let _this = this
funtion fn(){
    console.log(_this)
}