createClass is essentially a factory function, and extends approach is closer to the class writing of the latest ES6 specification. The grammatical differences between the two methods are mainly reflected in the definition of methods and the declaration of static attributes. createClass method definitions are separated by commas, because creatClass is essentially a function and passed to it as an Object; while class method definitions must bear in mind not to use commas, which is the ES6 class grammar specification.

The difference between React.createClass and extends Component lies mainly in:

1. Grammatical Differences
 2. propType and getDefaultProps
 3. The Difference of State
 4. this distinction
5,Mixins

1. Grammatical Differences

• 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;  
//This method uses es6 grammar and defines constructor s by class. Constructors construct properties and states by default.

2. proType and getDefaultProps

• React.createClass:

//Setting and obtaining props through the proTypes object and the getDefaultProps() method

import React from 'react';

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

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

export default Contacts;  

• React.Component:

//By setting two properties propTypes and 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>
    }
}

3. The Difference of State

• React.createClass:

//Returns an object with an initial value through the getInitialState() method

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

• React.Component:

//Setting the initial state through 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>
    }
}

4. this distinction:

• React.createClass:

///Will bind correctly this

import React from 'react';

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

export default Contacts;  

• React.Component:

//Because ES6 is used, there are slightly different properties that are not automatically bound to instances of React classes.


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

We can also change the context of this.handleClick execution in the constructor, which should be a better way than the above one. In case we need to change the grammar structure, this way does not need to change the JSX part at all:

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;  

5. Mixins distinction

If we use ES6 to create components, the features of React mixins will not be used.

React.createClass: With React.createClass, we can add an attribute called mixins when creating components, and assign the set of classes that can be mixed to mixins in the form of arrays.

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

since —–