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