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

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

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

第二种是方法语法，它在prototype对象上创建一个属性，用作新实例的原型，这是一个＆＃34; normal＆＃34; this方面的函数（例如，this内部的函数取决于它的调用方式。）

它们之间在this处理方面的差异很大：这意味着如果您使用bar作为道具，在第一个例子中您不必担心{{ 1}}管理（但你为每个实例创建一个新函数）;使用方法语法，您必须担心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
    }
}

func（）=＆gt;之间的区别是什么？ {}和func =（）=＆gt; {} 在班上？

2 个答案: