Using ES7 Decorators as Mixins(raganwald.com)

16 pointsby kilimchoivor 11 Jahren13 comments

http://raganwald.com/2015/06/26/decorators-in-es7.html

4 comments

One really useful pattern is React higher-order components, eg. https://github.com/elierotenberg/react-nexus#componentgetnex...

The pattern is

  function decorate(params) {
    return (Component) => class extends React.Component {
      ... // some code using params
      render() {
        return <Component {...this.props} />
      }
    };
  }

my2c.

mikewhyvor 11 Jahren

I haven't seen that usage for higher-order components before. This is the pattern I've been following:

    function decorate (Component) {
      let HigherOrderComponent = React.createClass({
        render () {
          return <Component {...this.props} />
        }
      })
      
      return HigherOrderComponent
    }

as explained here: https://medium.com/@dan_abramov/mixins-are-dead-long-live-hi...

HeyImAlexvor 11 Jahren

They are the same I think, only one has extra parameters. At least in Python, @fn(...args) evaluates the function first and uses the result as a decorator. The guy who wrote the blog post you mention actually uses the parent's pattern in react-dnd.

amccloudvor 11 Jahren

This works really well with React components

Ronsenshivor 11 Jahren

Kinda makes me feel incompetent.

Just started using ES6 in nodejs and here are people already gunning for ES7. Amazing.

braythwaytvor 11 Jahren

The subtext of this article is that underneath all this glitzy new syntax, class mixins are absolutely nothing new. The semantics are the same. The important thing is to focus on the underlying principles and let the syntax evolve as it wishes.

nuxi7vor 11 Jahren

dude, es6 is way too mainstream for cutting edge web programming. If you're not using es7 already you might as well still be using table layouts

huxleyvor 11 Jahren

I've started writing my own ES9 specification to get a jump on the really cutting-edge stuff, it's influenced by functional languages but only ironically.

girvovor 11 Jahren

Don't stress, while ES7 is exciting (and I'm using parts of it, async/await alone are worth using) a fair bit of it is still up in the air. Unless there are particular features you'd like (for myself that is async/await and decorators), es6 alone is well worth it.

jjawssdvor 11 Jahren

Don't get worked up over this. Let the dust settle and the smoke clear. Take a deep breath and relax. You'll need it in the JS community.

dominotwvor 11 Jahren

I want to try decorators but I really dislike javascript classes.

Bahamutvor 11 Jahren

You don't have to use them with just classes: https://github.com/wycats/javascript-decorators

dominotwvor 11 Jahren

All the examples seem to be using classes. I think I am missing something here.

Can you point me to an example without es6 classes?