Question

我知道在类中声明方法有3种方法。我曾经使用过React.create类，但是我决定选择用新语法编写的炒作 - ES6。

我承认我对es6很少。绑定此关键字有三种方法。

1

class myClass extends Components {
    constructor(props){
        super()
        this.doSomething = this.doSomething.bind(this)
    }
    doSomething(){
    }
    render(){
       return(<div onClick={this.doSomething}>click me</div>)
    }
}

2

class myClass extends Components {
    constructor(props){
        super()
    }
    doSomething(){
    }
    render(){
       return(<div onClick={this.doSomething.bind(this)}>click me</div>)
    }
}

3

class myClass extends Components {
    constructor(props){
        super()
    }
    doSomething(){
    }
    render(){
       return(<div onClick={e => this.doSomething}>click me</div>)
    }
}

我的问题是这些不同的做事方式是如何彼此不同的？

Answer 1

作为你的问题。

方法1 正在使用构造函数中定义的函数。

此方法是前一个方法与类构造函数的使用的混合。

您不必再在 JSX 中使用bind()，但这会增加构造函数代码的大小。

方法2 正在使用Function.prototype.bind（）。

由于ES6类的任何方法都是纯JavaScript函数，它从函数原型继承bind()。所以现在当我们在 JSX 中调用increaseQty()时，这将指向我们的类实例。您可以在此MDN article中详细了解Function.prototype.bind()。

方法3 正在使用胖箭头功能和构造函数。

ES6 fat arrow函数在调用它们时保留此上下文。我们可以使用此功能并在构造函数中重新定义doSomething()。

Answer 2

这些是范围函数的示例。

https://ariya.io/2013/05/es6-and-block-scope

所以对于第一个实例

onClick={this.doSomething}

onClick超出了类的范围。所以需要绑定。所以在里面调用它将引用React元素（div）

第二个实例

onClick={this.doSomething.bind(this)}

基本相同。现在你从onClick的调用者绑定this。这恰好是班级。

第三个实例

onClick={e => this.doSomething}

使用箭头更改函数的上下文，因此从this引用div，它变为this引用类

奖金实例

doSomething = () => {}

称之为

onClick={ this.doSomething }

Answer 3

简而言之，选项1在构造函数中绑定this，因此绑定仅在每次使用组件时发生一次。这是以必须编写构造函数为代价的，这可能不是必需的。

选项2和3使用不同的语法实现相同的功能，每次渲染组件时都会创建一个绑定了this的新函数。

您的选项3实际上应该调用函数doSomething，即e => this.doSomething()。我个人要么将事件e传递给函数，要么将e更改为()，以明确匿名函数没有使用任何参数。

第一个选项稍微提高效率，因为你没有在每个渲染上创建一个新函数，但我倾向于使用选项3，因为它看起来更好，我从来没有注意到它有任何真正的性能问题。由你决定。

顺便说一句，如果您使用createClass，则React会为您处理方法中this的绑定，这在评估要使用哪种方法时需要考虑。

使用es6将这些关键字绑定的3种方法

3 个答案: