关于onClick={() => this.handleClick(i)}与onClick={this.handleClick(i)}的区别

关于onClick={() => this.handleClick(i)}与onClick={this.handleClick(i)}的事件响应区别

前几天开发中遇到的问题，关于事件响应及绑定this指向的问题，废话不多说直接上代码

1.函数的声明与函数表达式

一般函数的定义方式有两种：

函数的声明：

function handleClick(x,y){
	return x + y
}

关于函数声明，它最重要的一个特征就是函数声明的提升，即执行代码之前先读取函数声明，这意味着可以把函数声明放在调用他的语句之后，如下代码可以正确执行

handleClick(2,3); // 5
function handleClick(x,y){
	return x + y
}

函数表达式：

handleClick = handleClick(x,y){
	return x + y
}

它的调用方法为：

function handleClick(x,y){
	return x + y
}
handleClick(2,3); // 5

相信大家都可以看出来，这可以看作将一个匿名函数赋值给一个变量handleClick，所以必须在赋值之后才可以调用这个函数，否则会报undefined的错误。
总结一下，由于浏览器在执行环境中加载数据时，解析器会率先读取函数声明，所以函数的声明在执行任何代码前都可以调用；至于函数表达式，则必须等到解析器执行到它的所在的代码行，才会真正的被解析，所以它必须先定义

2.自执行函数

自执行函数大家应该都已经熟悉了，即创建一个匿名函数后立即执行的函数，例如：

(function () {return 1;}()) // 立即执行
var handleClick = function() {return 1;}() //立即执行

3.onClick={() => this.handleClick(i)}、onClick={this.handleClick(i)}与onClick={this.handleClick}

好的，那么重点来了，敲黑板了啊~
onClick={这里是一个匿名函数或者函数引用}所以：
onClick = {this.handleClick(i)}这里包裹的函数其实是一个自执行函数，浏览器执行到这里的时候，handleClick函数会立即执行，并不需要点击才能触发。
onClick={() => this.handleClick(i)},onClick={this.handleClick}，这两个函数都不是自执行函数，所以点击的时候才会触发，这两者的区别在于，点击的时候onClick={() => this.handleClick(i)}会执行一个匿名函数（箭头函数），再这个函数里调用传参函数（this.handleClick(i)）；然而onClick={this.handleClick}是直接调用了this.handleClick
总结一下：
this.handleClick(i),this.handleClick都是函数引用。