Difference Between Class-declaration Syntax In Javascript For React Native
Solution 1:
Reading the blog posts (from comment of Felix) is certainly helpful. I have however some 'from the trenches' thoughts after switching between those two variants back and forth (ES6 plain javascript class in the first case and React's createClass in the second case).
I started already after ES6 classes were added so I quickly switched to it after using createClass in tutorial and started with ES6. I was excited to use finally nice and more readable way... Or so I thought.
Very quickly it turned out that some things that are easy in objects created with createClass are not really that easy or readable using plain javascript. I tended to write more code and make more mistakes by using it.
First thing: you cannot use Mixins with ES6 classes. That might not seem like a big problem, but there are a number of good cases handled by mixins in React and React Native. One that I missed dearly is TimerMixin (https://www.npmjs.com/package/react-timer-mixin) which handles the important case of handling timeouts regardless if your component is still rendered on screen. That's really nice and clean way of solving difficult problem. There is no equally nice way using ES6 classes.
The second thing: autobinding is missing. This might not seem like a big deal, but it's quite natural to expect that 'this' inside the component actually means "current object". Maybe it's because of background of other OO languages, but I keep on forgetting that in javascript it's not so obvious. React's createClass does auto-binding for you, so when you pass method of your object as callback, you can actually use "this." inside those methods and refer to the object. In case of ES6 classes you need to either manually .bind(this) for those methods or (even more ugly) use arrow functions and pass () => { this.method() } as callbacks rather than simply 'this.method'.
Eventually I found out that there are many more cases where createClass approach feels much more natural than ES6's variant, so I'd really recommend this. I switched all my code back after seeing how much readable createClass approach is.
Zvona in the comment mentioned inheritance - but it's not as important to me. More often than not inheritance is a code smell for user components. It's much cleaner to do Composition or Mixins in most cases - especially that React supports transferring properties between component. Actually not having Mixins kind of forces you to do inheritance which opens the doors to many edge cases (especially when you involve code executed in constructors which might have some undesirable side effects in more complex cases)
Post a Comment for "Difference Between Class-declaration Syntax In Javascript For React Native"