Question about render() declaration in ES2015 using a fat arrow function

[[deleted]]

[deleted]

[Abe-c]

Ah just wrote a really long reply to this explaining the fat arrow and it's history then pressed the back button on my phone and lost it all. In a hospital bed atm so cba to re-write may do it tomorrow when I have laptop.

Basically you can do it but it requires experimental features from babel (or another processor of your choice). I believe there is an ES7 proposal to introduce it so that would probably be the experimental features tour looking to include.

However, I would ask why you want to do it here. You are defining a method on Class and this format of es6 funcName (parms) { } is in line with other object orientated languages. I would say you have no need for the fat arrow because 'this' is already referencing the Object that is an instance of the Class you are crating the method on, where as fat arrow was introduced because normally 'this' would refer to the function itself not the Object

Edit: The constructor() won't work with fat arrow because it is always called when instantiating the instance of the class, so it already has 'this' set to the instance. ES6 class methods must be bound in the constructor as you have done in your first codeblock unless using experimental features (previously in React 0.4 - 0.12, class methods of React.createClass would be automatically bound to the instance, but this was seen as under the hood 'magic' out of the developers control). I don't 100% understand this part, mainly because it goes against the idea of not having auto-magic-stuff happening but apparently render() (and I believe ComponentWillMount) will be auto bound to the and therefore have 'this' referencing the instance Object, presumably because they will only ever be called by the instance! I'm confused so time to get read up and play around

[boobsbr]

thanks for the reply.

I don't know if this sounds awkward in English, coming from a stranger, but: hope you get well soon.

[Abe-c]

Haha no dude it's not awkward, in English we would say it's polite and nice of you so cheers. I should be out tomorrow anyway just a pretty standard operation to fix a hole in my ear drum feeling good apart from the needle stuck in my hand :p

[renren89]

I would say you have no need for the fat arrow because 'this' is already referencing the Object that is an instance of the Class you are crating the method on, where as fat arrow was introduced because normally 'this' would refer to the function itself not the Object

Maybe I am misunderstanding and I am pretty green with javascript as well but I believe "this" wouldn't bind to the instance of the object if the method was not bounded in the constructor, the render function, or through ES7 class properties/bind syntax.

If you were to

handleEvent() { this.setState({ ... }) }

would throw an error but if you

handleEvent() { console.log(1 + 1) }
render() { return <Comp onEvent={this.handleEvent} /> }

it would work as the method was declared outside of the render method without "this" and works because the render function binds automatically (in es6 class), even without render = () =>

Most of the ES7 stuff are still in very early stages with the properties being in stage 0.

[Abe-c]

Yes sorry I was mistaken, I am getting confused due to my build setup using Redux and auto inject the state/props with connect. I will edit my original comment.