React：从ES5的createClass 到ES6的extends Component，this的变化

ES5中类组件的写法：

import React from 'react';

const Contacts = React.createClass({

handleClick() {

console.log(this); // React Component instance

},

render() {

return (

<div onClick={this.handleClick}>123</div>

);

}});

export default Contacts;

组件使用时，this是表示实例化后<Contacts />这个组件对象，方法handleClick也能正常调用。

而使用ES6的类声明实例化对象之后，其中的方法比如这里的handleClick就不能用this调用了。错误示例：

class Test entends React.Component {

constructor () {

super();

}

handleClick () {

console.log(this);

}

render () {

return (

<div onClick={this.handleClick}>123</div>

)

}

}

this中是找不到handleClick 方法的。一种改正方法是通过bind()函数绑定。

详见 http://blog.csdn.net/qtwwyl/article/details/76285270

这里，我们不使用这种bind方法手动把handleClick方法绑定在实例化对象下，

即让this能访问handle方法。因为这个方式更消耗性能，而且代码不优美。

我们就利用ES6的箭头函数去简化，让this找到实例化对象的方法。如下：

class Contacts extends React.Component {  
 constructor(props) {
   super(props)
 }
 handleClick = () => {
   console.log(this)
 }
 render() {
   return (
     <div onClick={this.handleClick}>123</div>
   );
 }

}

这样，实例化的组件对象this就能访问到handleClick方法了！