5 ms·
This is unsettling: class Score extends React.Component { render() { var {initials, score} = this.props.score; return ( <li key={init
by 6t6t6 11y ago
This is unsettling:
class Score extends React.Component {
render() {
var {initials, score} = this.props.score;
return (
<li key={initials}>
<strong>{initials}</strong> {score}
</li>
);
}
}
Score = Relay.createContainer(Score, {
fragments: {
score: () => Relay.QL`
fragment on Score {
initials,
score,
}
`,
},
});
Soo, if I understood well, first they create a class and then they create a global variable reusing the same name of the class, in order to create and object that expands the class?
This Facebook people know how to make me uncomfortable. But I guess I could get used, the same way I got used to JSX...
- anarchy8 11y agoIf I recall correctly, this is simply a decorator. Using ES7, you could write the createContainer call using the new decorator syntax and avoid this uncomfortableness.
- mst 11y agoThey create a class, then they wrap the class in a class. A class in javascript is just a variable, after all. I think, personally, I'd've called the initial class ScoreGuts or something, or gone with a different syntax that returned the class as a value, but ... eh. It's really not that big a deal.
- 6t6t6 11y agoNow I understand. Thank you! > I think, personally, I'd've called the initial class ScoreGuts or something Well, maybe the point is that the original class becomes "useless" once it has been "decorated"; so it doesn't make sense that it has its own name. But it's is also true that, once you get used to program using FP style, mutating variables like this feels "weird".
- mst 11y agoYeah, that would seem like the motivation, but it feels a bit weird to me too. It occurs to me that you could probably do something like Score = do_the_decoration((function () { class Score ... { ... } return Score; )()); but that's not exactly 100% better, just weird to a different subset of people :)
- 6t6t6 11y ago> but that's not exactly 100% better, just weird to a different subset of people Lol!
- masterj 11y agoIn the example you used you're re-defining the class by wrapping it, not creating a global variable... Consider it like: var a = 1; a = func(a); Does it seem cleaner if you use the stateless functions from React 0.14? http://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components http://facebook.github.io/react/blog/2015/09/10/react-v0.14-... var Score = (props) => ( <li key={props.score.initials}> <strong>{props.score.initials}</strong> {props.score.score} </li> ); Score = Relay.createContainer(Score, { fragments: { score: () => Relay.QL` fragment on Score { initials, score, } `, }, });
- 6t6t6 11y agoThank you very much for the explanation! I was confused because I didn't realize that, actually, a class in ES6 is just a variable. Also, I am not used to the decorator pattern. Now it makes sense.
- azernik 11y agoIt's even worse - classes in ES6 are just functions (their constructors); 'obj = new Class()' is just sugar for 'obj = {}; Class.bind(obj)()'. So if you leave off the "new", you'll end up clobbering whatever 'this' defaults to, which is usually the global window object.