The main differences between React. CreateClass and extends Component are:

  1. Grammatical differences between

  2. PropType and getDefaultProps

  3. State difference

  4. This difference

  5. Mixins

Grammatical differences between

React.createClass

import React from 'react';

const Contacts = React.createClass({  
  render() {
    return( <div></div> ); }});export default Contacts;  Copy the code

React.Component

import React from 'react';

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

The latter approach uses ES6 syntax and uses the constructor constructor to construct default properties and states.

PropType and getDefaultProps

React. CreateClass: Sets and gets props using 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;  Copy the code

React.component. propTypes and defaultProps by setting two properties

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>
    }
}Copy the code

State difference

React. CreateClass: Returns an object containing the initial value via the getInitialState() method

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

React.component: Sets the initial state by 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>
    }
}Copy the code

This difference

React.createClass: this will bind correctly

import React from 'react';

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return(<div onClick={this.handleclick}></div>// switches to the correct this context); }});export default Contacts;  Copy the code

React.ponent: This is slightly different because ES6 is used, and properties are not automatically bound to instances of the React class.

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}/>
    }
}Copy the code

We can also change the context in which this. HandleClick is executed from constructor. This should be a better approach than the above method, in case we need to change the syntactic structure, this method 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;  Copy the code

Mixins

If we used ES6 to create components, the React Mixins feature would not be available.

React. CreateClass: With React. CreateClass, we can add a property called mixins when we create a component and assign an array of classes to mixins.

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