Use babel-plugin-transform-class-properties instead of bind#14
Conversation
649b433 to
e0bad11
Compare
| } | ||
|
|
||
| signedInView() { | ||
| signedInView = () => { |
There was a problem hiding this comment.
The view functions don't need to be arrow functions right?
There was a problem hiding this comment.
well this one accesses this.props 🤷♂️
There was a problem hiding this comment.
Yes? this.props works just fine since signedInView is called via this.signedInView().
() => {} explicity binds this to the function. This is mostly a style issue really
There was a problem hiding this comment.
There's some performance penalties associated with using foo = () => {} over foo(){} since the first doesn't end up in the prototype and is an object property instead.
Seems like @autoBind is the most performant way to do this overall. Though, the performance difference is probably negligible anyways.
There was a problem hiding this comment.
oops yeah you're right about the view functions, I've fixed that 👍 thanks!
Though, the performance difference is probably negligible anyways.
💭
We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil.
| @@ -19,10 +19,6 @@ class Login extends React.Component { | |||
|
|
|||
| this.onEmailChange = event => this.setState({ email: event.target.value }); | |||
| this.onPasswordChange = event => this.setState({ password: event.target.value }); | |||
There was a problem hiding this comment.
Might consider moving these out of the constructor as well
|
If you're curious about what happens with all the different ways of doing function defs w/ binds here they are: Source import autobind from 'autobind-decorator'
class Component {
constructor(value) {
this.value = value
this.constructorBind = () => {
return this.value
}
}
normal () {
return this.value
}
arrow = () => {
return this.value
}
@autobind
bind() {
return this.value
}
}Babel output var _class;
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object['ke' + 'ys'](descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc);if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object['define' + 'Property'](target, property, desc); desc = null; } return desc; }
import autobind from 'autobind-decorator';
let Component = (_class = class Component {
constructor(value) {
_defineProperty(this, "arrow", () => {
return this.value;
});
this.value = value;
this.constructorBind = () => {
return this.value;
};
}
normal() {
return this.value;
}
bind() {
return this.value;
}
}, (_applyDecoratedDescriptor(_class.prototype, "bind", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "bind"), _class.prototype)), _class); |
|
ahhh yikes maybe autobind was the way to go, oh well Thanks @d4l3k , this is all very insightful! will keep this in mind if we find the current method too slow |
|
The performance really doesn't matter in this case but I was just curious
what actually happens in the transformation
…On Sun, Jul 8, 2018, 00:43 Robert Lin ***@***.***> wrote:
ahhh yikes maybe autobind was the way to go, oh well
Thanks @d4l3k <https://github.com/d4l3k> , this is all very insightful!
will keep this in mind if we find the current method too slow
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#14 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AA3fMKQl5PH-Y8WBM_kPnbkzQr1YLWGGks5uEY4KgaJpZM4VGkC5>
.
|
|
is the arrow function more or less doing the exact same thing as the constructor bind? _defineProperty(this, "arrow", () => {
return this.value;
});
this.constructorBind = () => {
return this.value;
}; |
|
Yeah, pretty much. I was more looking at @autoBind vs arrow implementation.
Autobind/decorators modify the prototype instead of the object properties
from what I can tell
…On Sun, Jul 8, 2018, 00:49 Robert Lin ***@***.***> wrote:
is the arrow function looks to be doing more or less the exact same thing
as the constructor bind?
_defineProperty(this, "arrow", () => {
return this.value;
});
this.constructorBind = () => {
return this.value;
};
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#14 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AA3fMKf4Nf7DrTHytwrKcFz0oO-Ys3wOks5uEY9wgaJpZM4VGkC5>
.
|
👷 Changes
See #11 (comment)
This PR replaces
bindcalls with somebabel-plugin-transform-class-propertiesmagic💭 Notes
This uses the
Stage 0preset for babel-loader, which seems pretty broad but oh well🔦 Testing Instructions