React五种this绑定方案的差异性

方案一：React.createClass

这是老版本React中用来声明组件的方式，在那个版本中，没有class声明类，ES6的calss和createClass相比，移除了mixin和this的自动绑定，mixin可以使用高阶组件代替，class组件中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>
  }
}

这两种方法可以传参，但是也存在潜在的性能问题，会引起不必要的渲染

方案四：在构造函数中使用bind

class Test extends Component {
  constrcutor() {
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    console.log(this)
  }

  render() {
    return <Button onClick={this.handleClick}>测试</Button>
  }
}

这种方式是React推荐的方式，只在实例化组件的时候做一次绑定。但无法处理传参问题，也限制了它的使用场景。

方案五：使用箭头函数定义方法（class properties）

class Test extends Component {
  handleClick = () => {
    console.log(this)
  }

  render() {
    return <button onClick={this.handleClick}>测试</button>
  }
}

优点：

1、自动绑定
2、没有方案二、三所带来的的性能问题

property initializers还处在实验性阶段，默认不支持，不过官方的脚手架create-react-app默认支持这个特性,如果你想要在你的项目中使用这个默认的特性，你可以在项目中引入 babel 的transform-class-properties插件获取这个特性的支持。

总结：

每种绑定方案既然存在就有其存在的理由（除了第一种已经是过去），但是也会有相应的弊端，并没有绝对的谁好谁差，我们在使用时，可以根据实际场景做选择。