What Is The Difference Between Func() => {} And Func = () => {} In Class?

I'm learning to use Class syntax now to create React components now and notice I now have to declare methods like this: class Foo extends React.Component { ... bar = () =&g

Solution 1:

The first is relying on class fields, which aren't yet part of the language although they're a Stage 3 proposal and likely to be adopted soon. That code is setting a property on the instance (as though it were in the constructor) which is an arrow function (and thus closes over this). It's equivalent to this:

classFooextendsReact.component {
    constructor() {
        this.bar = () => {
            this.setState({ ... })
        };
    }
}

The second is method syntax, which creates a property on the prototype object that gets used as the prototype of new instances, and which is a "normal" function in terms of this (e.g., what this is inside it depends on how it's called).

The difference between them in terms of this handling is significant: It means that if you use bar as a prop, with the first example you don't have to worry about this management (but you're creating a new function for every instance); with the method syntax, you do have to worry about this management (which also can end up creating a new function, depending on how you handle it).

Solution 2:

If you're going to be using this style:

classFooextendsReact.component {
    ...
    bar() {
        this.setState({ ... })  // won't work
    }
}

You'd need to bind this to the current context, like this:

classFooextendsReact.component{
    constructor(props) {
       super(props);
       this.bar = this.bar.bind(this);
    }

    bar() {
        this.setState({ ... })  // works
    }
}