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