ES6语法重构的react组件

最近在学习react，其创建组件的方式有两种，一种是基于es6语法，一种是通过React.createClass方法来创建的，由于两种方法有一些地方不同，所以导致起初写代码是有点蒙，再次总结一下两种的不同，同时本人更加推崇使用es6语法来书写。

创建组件

／／React.createClass形式

import React from 'react';
const App = React.createClass({
render: function () {
return <div>组件</div>
}
});

个人感觉通过es6创建组件，结构更加清晰

／／React.Component(ES6)形式

import React from 'react';

class App extends react.Component {
render() {
return (
<div>组件</div>
);
}
}

state

使用ES6 class语法创建组件，初始化state的工作要在constructor中完成。不能再调用getInitialState方法。

／／react.createClass形式

import React from 'react';

const App = React.createClass({
getInitialState: function() {
return {
data: 1,
};
},

render: function() {
return (
<div>组件</div>
);
}
});

／／React.Component(ES6)形式

import Reactfrom 'react';

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { data: 1 };
}

render() {
return (
<div>组件</div>
);
}
}

this问题

这个是之前最让我困惑的地方，在es6语法创建组件中，class中的方法不会自动将this绑定，需要使用bind方法来进行绑定。

／／react.createClass形式

import React from 'react';

const App = React.createClass({
handleClick: function() {
console.log(this);
},
render: function() {
return (
<div onClick={this.handleClick}>组件</div>
);
}
});

／／React.Component(ES6)形式

import React,{ Component } from 'react';

class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
console.log(this);
}

render() {
return (
<div onClick={this.handleClick}>组件</div>
);
}
}

或者也可以使用箭头函数

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

render() {
return (
<div onClick={this.handleClick}>组件</div>
);
}
}

文章参考http://www.cnblogs.com/yongjz/p/5356914.html