CODEWITHSUNDEEP
react-native
gran33
gran33

Reputation: 12951

React.createClass vs extends Component

What's the different between 

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

To

class MyClass extends React.Component{...}

Upvotes: 46

Views: 16717

Answers (4)

Bipon Biswas
Bipon Biswas

Reputation: 11635

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

Upvotes: 3

Anshul Kai
Anshul Kai

Reputation: 4088

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

Upvotes: 4

Nader Dabit
Nader Dabit

Reputation: 53681

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.

Upvotes: 43

Sean
Sean

Reputation: 3042

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

Upvotes: 6

Related Questions