React.createClass vs ES6继承React.Component的差异

现在越来越多的开发者都已经大量接触ES6,而Facebook在React版本 v0.13.0支持了ES6 class写法。（所以这篇文章主要用于之前接触，然后断了一阵子，再接触的话，可以看下一些改变吧）

最早的时候我们使用React.createClass来进行组建的构建.

import React from 'react';

const Contacts = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;

现在我们可以用ES6中的继承extend来写

import React from 'react';

class Contacts extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default Contacts;

我们现在可以利用ES6的class来实现，我们可以通过babel来将ES6转化为ES5来支持更多的浏览器，我们需要使用contructor,然后调用super方法将组建的属性传递到React.Component上。

propTypes and getDefaultProps

这里有很多重要的变化包括默认属性，设置初试状态。在React.createClass中，我们可以通过propTypes 来定义属性，通过getDefaultProps来返回我们需要默认设置的值。

import React from 'react';

const Contacts = React.createClass({
  propTypes: {

  },
  getDefaultProps() {
    return {
      
    };
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;

而使用React.Component则可以使用propTypes作为一个类的基本属性，这样的改变更加有助于清晰的API设计，同样的设置默认值也变成了一个属性defaultProps.

import React from 'react';

class Contacts extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}
Contacts.propTypes = {

};
Contacts.defaultProps = {

};

export default Contacts;

关于state的一些改变

在老版本的react中我们通过使用getInitialState来设置一些初试状态。

mport React from 'react';

class Contacts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

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

export default Contacts;

而在使用新的继承来做的话，我们可以直接在constructor中来进行赋值声明。

import React from 'react';

class Contacts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

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

export default Contacts;

改变this

使用React.createClass会正确的自动绑定this到当前执行的函数中去。但是这个在ES6中会有些不一样。我们需要在contructor中执行bind函数或者使用ES6箭头函数

import React from 'react';

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

export default Contacts;

Mixins

在老版本中我们可以这样使用mixins，

import React from 'react';

var SomeMixin = {
  doSomething() {

  }
};
const Contacts = React.createClass({
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething(); // use mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Contacts;

而在使用ES6创建类的时候，不再支持 minxins.

大概就是这些吧。