类中的func（）=> {}和func =（）=> {}有什么区别？

Question

我现在正在学习使用Class语法创建React组件，并注意我现在必须声明这样的方法：

class Foo extends React.Component {
    ...
    bar = () => {
        this.setState({ ... })
    }    
}

而不是像这样：

class Foo extends React.Component {
    ...
    bar() {
        this.setState({ ... })  // won't work
    }
}

或者我不能使用this.setState() 。

任何人都可以解释创建这样的方法与它们与函数原型的关系有何区别？

Answer 1

第一个是依赖于课程领域 ，虽然他们是第3阶段提案并且很快就会被采纳，但这些领域还不是语言的一部分。 该代码在实例上设置一个属性（就像它在构造函数中一样），这是一个箭头函数（因此关闭this ）。 它相当于：

class Foo extends React.component {
    constructor() {
        this.bar = () => {
            this.setState({ ... })
        };
    }
}

二是方法的语法，它创建了一个属性prototype是被用来作为新实例的原型对象，而这在方面“正常”功能， this （例如，什么this里面这取决于它是如何称呼） 。

来讲它们之间的区别this处理是显著：这意味着，如果你使用bar作为道具，与第一例子中，你不必担心this管理（但你创造了每一个实例新功能） ; 使用方法语法，您必须担心this管理（也可能最终创建一个新函数，具体取决于您如何处理它）。

Answer 2

如果你打算使用这种风格：

class Foo extends React.component {
    ...
    bar() {
        this.setState({ ... })  // won't work
    }
}

你需要绑定this当前的背景下，这样的：

class Foo extends React.component {
    constructor(props) {
       super(props);
       this.bar = this.bar.bind(this);
    }

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