ES6箭头函数定义与其在react中的使用场景

1、ES6中的箭头函数是ES5匿名函数的语法糖（本身没有添加新功能，但是对人类更甜蜜的语法）

var tt = function (){

return 3+4

}

等价于

var tt=()=>{3+4}

1.1 箭头函数继承父作用域的this，普通函数的this是全局变量global

1.2 与匿名函数的使用区别：要不要带当前作用域的this

2、react中箭头函数的用处，绑定当前组件的this对象

2.1 在回调函数中使用到this相关的属性和方法时

callback:function(index){this.setState({index})}.bind(this)，其中的bind(this)是将this绑定到当前的react组件上，去掉的话出现错误：this.setState() is not a function,因为此时的this指向的不是当前组件。因为箭头函数默认执行了bind(this)，所以上面语句可以简写为callback:(index)=>{this.setState({index})}。

2.2 在事件处理器(如点击事件)中访问父组件时，需要为该函数绑定组件实例，共4种方法

1)、在构造函数中绑定，this.handleClick=this.handleClick.bind(this)

2)、class属性，handleClick=()=>{}

3)、在render方法中绑定onClick={this.handleClick.bind(this)}

4)、在render中使用箭头函数onClick={()=>this.handleClick.bind}

PS