React.Component vs React.createClass


Keywords:reactjs 


Question: 

I am confused whats the difference between a component and a react class?

And when do I use a component over a react class? Looks like a component is a class and createClass creates a component.

React.Component

This is the base class for React Components when they're defined using ES6 classes. See Reusable Components for how to use ES6 classes with React. For what methods are actually provided by the base class, see the Component API.

React.createClass

Create a component class, given a specification. A component implements a render method which returns one single child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.


4 Answers: 

The only React.createClass functionality that isn't supported by MyComponent extends React.Component is mixins.

to do getInitialState() you can do:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // initial state
    this.state = {
      counter: 0
    };
  }

  ...
}

or if you use a transpiler like babel, you can get

class MyComponent extends React.Component {
  state = {
    counter: 0
  }

  ...
}

Instead of auto-binding provided by createClass, you could explicitly bind using .bind(this) like you have shown above, or use the fat arrow ES6 syntax:

class MyComponent extends React.Component {
  onClick = () => {
    // do something
  }
  ...
}

Instead of putting things in componentWillMount, you could put things in constructor like so:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // what you would have put in componentWillMount
  }

  ...
}

There are way more details in the React documentation themselves, but basically the only additional functionality that React.createClass buys is mixins, but afaik anything you could have done with mixins can be done with context and higher ordered components.



They are 2 ways of doing the same thing.

React.createClass is a function that returns a Component class.

MyComponent = React.createClass({
  ...
});

React.Component is an existing component that you can extend. Mainly useful when using ES6.

MyComponent extends React.Component {
  ...
}


React.createClass - method to create component classes

For better use with ES6 modules by extends React.Component, which extends the Component class instead of calling createClass

Few differences between both are,

Syntax : React.createClass:

var MyComponent = React.createClass({ });

React.Component:

export default class MyComponent extends React.Component{ }

getInitialState() : React.createClass: Yes React.Component: No

constructor() : React.createClass: No React.Component: Yes

propTypes Syntax : React.createClass:

var MyComponent = React.createClass({
    propTypes: { }
});

React.Component:

export default class MyComponent extends React.Component{ }
MyComponent.prototypes = { }

Default Properties : React.createClass:

var MyComponent = React.createClass({
    getDefaultProps(): { return {} }
});

React.Component:

export default class MyComponent extends React.Component{ }
MyComponent.defaultProps = { }

state : React.createClass:

State changes can be made inside getInitialState() function

React.Component:

State changes can be made inside constructor(props) function

this :
React.createClass:

automatically bind 'this' values.
Ex: <div onClick={this.handleClick}></div>
'this' can be accessed by default in handleClick function

React.Component:

whereas here we need to bind explicitly,
Ex: <div onClick={this.handleClick.bind(this)}></div>


It's look like React recommend us to use React.createClass

As far as I know

  1. MyComponent extends React.Component not supported getInitialState()

  2. Use .bind(this) in React.createClass you'll get this

    Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.

I think it's might be more than this.

If someone list all of React.createClass functionality will be so great.

Note: React is currently in 0.14.3