React.createClass和extends Component的區別

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>
    }
})複製代碼