将ES6类语法用于React组件

Question

As far as I am aware there are two ways to create and export a react class using ES6.

Maybe considered the old way:

export default React.createClass({
   ...
});

Maybe considered the new way:

export class Todo extends React.Component {
   ...
};

I was asked today why I prefer the 'old' way compared to the 'new' way. I didn't really have a good answer apart from the fact that the 'new' way uses extends, and as a result, inheritance. I was taught in c# to always favour composition over inheritance. And in javascript the same, preferring to use the revealing module pattern over prototypical inheritance for 95% of cases.

Being fairly new to react, my question is, am I missing something to why the new way is better than the old way? In my eyes it is far cleaner to have a function that accepts parameters and returns an object compared to inheriting from one.

Would it maybe not be nicer to follow a conversion, TodoComponent, maybe, or add some sort of decorator rather then extending from React.Component?

Answer 1

I tend to always look at the React team examples for guidance. In this case, they've provided a whole example dedicated to ES2015. That clearly covers the "new" syntax, as you refer to it.

I also peruse a lot of code looking at how things are done. Most projects using ES2015 are using the "new" syntax as well.

Answer 2

I can't tell you which is better, I'm in the middle. But the one thing that you have to keep in mind is that the majority will go with the new syntax, especially as ES6 becomes more available. You should get used to seeing it and using it because you will see more and more examples of it in the future while people are migrating to it. It's almost a necessity to stay relevant and not fall back. You will get used to it, I'm actually starting to like it more and more.

Answer 3

The ES6 syntax will be transpiled into ES5 as modern browser do not fully support ES6 yet. One benefit of the old way would be that [mixins] can only be used the old way. The new way will result in less typing and a few extra functions. Especially scoping through arrow functions! Checkout: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins