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 (

this.handleClick}>123

);

}});

export default Contacts;

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

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

class Test entends React.Component {

constructor () {

super();

}

handleClick () {

console.log(this);

}

render () {

return (

this.handleClick}>123

)

}

}

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 (
     

123

   );
 }

}

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

你可能感兴趣的:(react,react)