React：createClass 和 extends Component的区别

1、state区别

import React from 'react';

const Contacts = React.createClass({
  getInitialState () {
    return {

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

export default Contacts;

import React from 'react';

class Contacts extends React.Component {
  constructor(props) {
    super(props); //传递props给component
    this.state = {

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

export default Contacts;

第一种的初始状态由getInitialState函数返回一个对象，第二种定义在constructor的属性中，采用了ES6的写法，相比来说使用了更少的React样板, 也就是更加原生的js
2、propTypes 和 getDefaultProps的区别

import React from 'react';

const Contacts = React.createClass({
  propTypes: {

  },
  getDefaultProps() {
    return {

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

export default Contacts;

propTypes是一个对象，我们可以在里面定义每一个参数的类型。getDefaultProps是一个函数，返回我们创建的初始值对象。

import React from 'react';

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

};
Contacts.defaultProps = {

};

export default Contacts;

这里propTypes和defaultProps是Contacts类的两个属性。
3、this的区别

import React from 'react';

const Contacts = React.createClass({
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Contacts;

import React from 'react';

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

export default Contacts;

可以改为

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;

另外ES6的写法不支持Mixins咯！
注：createClass已被extends Component替代

参考链接 https://toddmotto.com/react-create-class-versus-component/