类中 func() => {} 和 func = () => {} 有什么区别?

2024-01-07

我正在学习使用Class现在创建 React 组件的语法,请注意我现在必须声明如下方法:

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

而不是像这样:

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

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

任何人都可以解释创建这样的方法之间有什么区别以及它们与函数原型的关系吗?


第一个是依靠类字段 https://github.com/tc39/proposal-class-fields,尽管它们是第三阶段提案并且可能很快就会被采用,但它们还不是该语言的一部分。该代码在实例上设置一个属性(就像在构造函数中一样),这是一个箭头函数(因此关闭this)。它相当于这样:

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

第二个是方法语法,它在prototype用作新实例原型的对象,并且它是一个“正常”函数this(例如,什么this位于其内部取决于它的名称)。

它们之间的区别在于this处理很重要:这意味着如果您使用bar作为道具,对于第一个示例,您不必担心this管理(但您正在为每个实例创建一个新函数);使用方法语法,您确实需要担心this管理(这也可能最终创建一个新功能,具体取决于您如何处理它)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

类中 func() => {} 和 func = () => {} 有什么区别? 的相关文章

随机推荐