React.createClass vs extends Component

Question

What\'s the different between

var MyClass = React.createClass({...});

To

class MyClass extends React.Component{...}


        

Answer 1

React.createClass

Here we have a const with a React class assigned, with the important render function following on to complete a typical base component definition.

import React from 'react';

const Contacts = React.createClass({
    render() {
    return (
    <div></div>
   );
  }
});

export default Contacts;

React.Component

Let’s take the above React.createClass definition and convert it to use an ES6 class.

import React from 'react';

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

export default Contacts;

From a JavaScript perspective we’re now using ES6 classes, typically this would be used with something like Babel to compile the ES6 to ES5 to work in other browsers. With this change, we introduce the constructor, where we need to call super() to pass the props to React.Component.

For the React changes, we now create a class called “Contacts” and extend from React.Component instead of accessing React.createClass directly, which uses less React boilerplate and more JavaScript. This is an important change to note further changes this syntax swap brings.

More

Answer 2

One major differentiator not mentioned above is how the state is inherited when using createClass vs extending a Component.

var BaseComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      foo: 'bar'
    };
  }
});

var BaseClass = React.createClass({
  getInitialState() {
    return {
      foo: 'bar'
    };
  }
});

class Test extends BaseClass { // or extend BaseComponent
  constructor(props){
    super(props);
    this.state = {
      ...this.state,
      myNewVar: 'myNewVal'
    }

  render() {
    alert(this.state.foo)
  }
}

Answer 3

These two ways depend on if you are using ES6 syntax or not, and they also change the way you set up your initial state.

When using ES6 classes, You should initialize state in the constructor.

When using React.createClass you have to use the getInitialState function.

ES6 Class Syntax:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state, this is ES6 syntax (classes) */ };
  }
}

ES5 React.CreateClass syntax:

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

These will both work the same way to set up initial state.

Answer 4

With the class MyClass extends React.Component{...} syntax,

you can not use mixins and you need to bind the context of the method yourself

class MyClass extends Component {
   constructor() {
     super();
     this.handleClick.bind(this);
   }

   handleClick() {
     this.setState(...);
   }
}

to me these are the biggest differences.

to replace the mixin, you can use a Container to wrap your component

export default Container(MyClass);

function Container(Component) {
   var origin = Component.prototype.componentDidMount;
   Component.prototype.componentDidMount = function() {
      origin.apply(this, arguments);
      /* do mixin */
   }
}