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

@[TOC](onClick={() => this.handleClick(i)}、onClick={this.handleClick(i)}与onClick={this.handleClick})

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

一般的函数定义方法有两种：
函数的声明：

function handleClick(x,y){
    retrun x+y;
}

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

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

函数表达式：

handleClick=function (x,y){
    retrun x+y;
}

它的调用方法为：

handleClick=function (x,y){
    retrun 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}这两个函数都不是自执行函数，所以会在点击的时候才触发。这两者的区别又在于，点击时，前者会执行一个匿名函数（箭头函数），在这个函数里调用传参函数（this.handleClick(i)），后者直接调用了this.handleClick，因此this.handleClick(i),this.handleClick都是函数引用。