React.createClass和extends Component的區別

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