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>
    }
})