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：以上方法3）和4）会在每次组件渲染时创建一个新函数，会破坏基于恒等比较的性能优化(导致每次组件渲染时子组件都要重新渲染，哪怕该子组件没有实质上的变化)

3、JS中如果传递一个函数名给一个变量，之后通过函数名()的方式调用该函数，在该函数内部如果使用了this，则this的指向会丢失(若该js嵌入HTML中执行，则this指向window对象)。

例如 let cat={name:'jack',getName:function(){console.log(this.name)}}，调用方法a：catgetName()//结果正常，因为getname运行在cat对象中；调用方法b:let catName=cat.getName;catName()//报错，此时this指向丢失。