createClass本质上是一个工场函数，extends的体式格局越发靠近最新的ES6范例的class写法。两种体式格局在语法上的差异重要体现在要领的定义和静态属性的声明上。createClass体式格局的要领定义运用逗号,离隔，因为creatClass本质上是一个函数，通报给它的是一个Object；而class的体式格局定义要领时务必服膺不要运用逗号离隔，这是ES6 class的语法范例。

React.createClass和extends Component的区分重要在于：

1. 语法区分
2. propType 和 getDefaultProps
3. 状况的区分
4. this区分
5. Mixins

语法区分

React.createClass

import React from 'react';

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

export default Contacts;  

React.Component

import React from 'react';

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

export default Contacts;  

后一种要领运用ES6的语法，用constructor组织器来组织默许的属性和状况。

propType 和 getDefaultProps

React.createClass：经由过程proTypes对象和getDefaultProps()要领来设置和猎取props.

import React from 'react';

const Contacts = React.createClass({  
  propTypes: {
    name: React.PropTypes.string
  },
  getDefaultProps() {
    return {

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

export default Contacts;  

React.Component：经由过程设置两个属性propTypes和defaultProps

import React form 'react';
class TodoItem extends React.Component{
    static propTypes = { // as static property
        name: React.PropTypes.string
    };
    static defaultProps = { // as static property
        name: ''
    };
    constructor(props){
        super(props)
    }
    render(){
        return <div></div>
    }
}

状况的区分

React.createClass：经由过程getInitialState()要领返回一个包括初始值的对象

import React from 'react';
let TodoItem = React.createClass({
    // return an object
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return <div></div>
    }
})

React.Component：经由过程constructor设置初始状况

import React from 'react';
class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        } 
    }
    render(){
        return <div></div>
    }
}

this区分

React.createClass：会准确绑定this

import React from 'react';

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>//会切换到准确的this上下文
    );
  }
});

export default Contacts;  

React.Component：因为运用了 ES6，这里会有些微差别，属性并不会自动绑定到 React 类的实例上。

import React from 'react';
class TodoItem extends React.Component{
    constructor(props){
        super(props);
    }
    handleClick(){
        console.log(this); // null
    }
    handleFocus(){  // manually bind this
        console.log(this); // React Component Instance
    }
    handleBlur: ()=>{  // use arrow function
        console.log(this); // React Component Instance
    }
    render(){
        return <input onClick={this.handleClick} 
                              onFocus={this.handleFocus.bind(this)}  
                              onBlur={this.handleBlur}/>
    }
}

我们还能够在 constructor 中来转变 this.handleClick 实行的上下文，这应该是相对上面一种来讲更好的方法，万一我们须要转变语法结构，这类体式格局完整不须要去修改 JSX 的部份：

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

假如我们运用 ES6 的体式格局来建立组件，那末 React mixins 的特征将不能被运用了。

React.createClass：运用 React.createClass 的话，我们能够在建立组件时增加一个叫做 mixins 的属性，并将可供夹杂的类的鸠合以数组的情势赋给 mixins。

import React from 'react';
let MyMixin = {
    doSomething(){}
}
let TodoItem = React.createClass({
    mixins: [MyMixin], // add mixin
    render(){
        return <div></div>
    }
})

参考文章1
参考文章2
参考文章3