React.createClass vs extends Component

Question

What's the different between

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

To

class MyClass extends React.Component{...} 

Answer 1

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 2

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