React基础面试题引发的思考

由一道React基础面试题引发的思考
提问：react项目中的JSX里，onChange={this.func.bind(this)}的写法，为什么要比非bind的func = () => {}的写法效率高？

声明:由于本人水平有限，有考虑不周之处，或者出现错误的，请严格指出，小弟感激不尽。这是小弟第一篇文章，有啥潜规则不懂的，你们就告诉我。小弟明天有分享，等分享完了之后，继续完善。

之前不经意间看到这道题，据说是阿里p5-p6级别的题目，我们先看一下这道题目，明面上是考察对react的了解深度，实际上涉及的考点很多：bind，arrow function，react各种绑定this的方法，优缺点，适合的场景，类的继承，原型链等等，所以综合性很强。

我们今天的主题就是由此题目，来总结一下相关的知识点，这里我会着重分析题目中第二种绑定方案。

五种this绑定方案的差异性

方案一: React.createClass

这是老版本React中用来声明组件的方式，在那个版本，没有引入class这种概念，所以通过这种方式来创建一个组件类（constructor） ES6的class相比createClass，移除了两点：一个是mixin 一个是this的自动绑定。前者可以用HOC替代，后者则是完完全全的没有，原因是FB认为这样可以避免和JS的语法产生混淆，所以去掉了。使用这种方法，我们不需要担心this，它会自动绑定到组件实例身上，但是这个API已经废弃了，所以只需要了解。

const App = React.createClass({
  handleClick() {
    console.log(this)
  },
  render() {
    return <div onClick={this.handleClick}>你好</div>
  }
})

方案二：在render函数中使用bind

class Test extends Component {
  handleClick() {
    console.log(this)
  }
  render() {
    return <div onClick={this.handleClick.bind(this)}></div>
  }
}

方案三：在render函数中使用箭头函数

class Test extends Component {

  handleClick() {
    console.log(this)
  }
  render() {
    return <div onClick={() => this.handleClick()}></div>
  }
}

这两个方案简洁明了,可以传参，但是也存在潜在的性能问题: 会引