类中的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管理(也可能最终创建一个新函数,具体取决于您如何处理它).