React this指向问题

结合React和es6中Class类, 目的是加深理解react框架中 this 上下文指向问题,记录笔记;

方法一：React.createClass 自动绑定

---

React 中建立组件的方式已经不少，比较古老的诸如 React.createClass 应该不少人并不陌生。固然，从 React 0.13 开始，可使用 ES6 Class 代替 React.createClass 了，这应该是从此推荐的方法。
可是须要知道，React.createClass 建立的组件，能够自动绑定 this。也就是说，this 这个关键字会自动绑定在组件实例上面。

// This magically works with React.createClass
// because `this` is bound for you.
onClick = {this.handleChange}
复制代码

固然，对于组件的建立，官方已经推荐使用 class 声明组件或使用 functional 无状态组件;

方法二：渲染时绑定

---

咱们假定全部的组件都采起 ES6 class 方式声明。这种状况下，this 没法自动绑定。一个常见的解决方案即是：

onClick = {this.handleChange.bind(this)}
复制代码

这种方法简明扼要，可是有一个潜在的性能问题：当组件每次从新渲染时，都会有一个新的函数建立。 这听上去貌似是一个很大的问题，可是其实在真正的开发场景中，由此引起的性能问题每每不值一提（除非是大型组件消费类应用或游戏）。

方法三：箭头函数绑定

这种方法其实和第二种相似，都是用 es6 Class定义，咱们能够隐式绑定 this：

//普通函数
handleClick(){
        console.log('handleClick--实例',this);
};
render () {
        return (
                <div>
                    <Button type="primary" onClick={ ()=>{ this.handleClick() } }>修改 username </Button>
                </div>
        )
    }
复制代码

固然，也与第二种方法同样，它一样存在潜在的性能问题。 下面将要介绍的两种方法，能够有效规避没必要要的性能消耗.

方法四：Constructor 内绑定

constructor 方法是class类的默认构造方法,默认返回实例对象，经过new命令生成对象实例时，自动调用该方法。es6 阮一峰 Class

constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
}
复制代码

这种方式每每被推荐为“最佳实践”.
可是就我的习惯而言，我认为与前两种方法相比:
constructor 内绑定,在可读性和可维护性上也有些欠缺。同时，咱们知道在 constructor 声明的方法不会存在实例的原型prototype上，而属于实例自己的方法。每一个实例都有一样一个 handleChange，这自己也是一种重复和浪费。

方法五：Class 属性中 自定义的方法用箭头函数

//箭头函数
handleClick = () => {
        console.log('handleClick--实例',this);
      // call this function from render 
      // and this.whatever in here works fine.
};
render () {
        return (
                <div>
                    <Button type="primary" onClick={ this.handleClick }>修改 username </Button>
                </div>
        )
    }
复制代码

咱们来总结一下这种方式的优势：

• 使用箭头函数，有效绑定了 this；
  
• 没有第二种方法和第三种方法的潜在性能问题；
  
• 避免了方法四的组件实例重复问题；
  
• 咱们能够直接从 ES5 createClass 重构得来。
  感谢参考连接