React组件中的ES6和ES8语法

Question

我是使用React的ES6新手，在组件中看到了这段令人费解的代码：

   componentWillUnmount() {
        base.removeBinding(this.ref);
        this.unsubscribe();
    }

    // ES6 syntax
    handleToggle(event, toggled){
        this.setState({
            [event.target.name]: toggled,
        });
    };

    // possible ES8 syntax
    handleToggle = (event, toggled) => {
        this.setState({
            [event.target.name]: toggled,
        });
    };

第二种方法让我感到困惑，handleToggle方法到底发生了什么？有没有ES5的等价物？

我猜想ES5的等价物是：

   componentWillUnmount: function() {
        base.removeBinding(this.ref);
        this.unsubscribe();
    }

    handleToggle: (event, toggled) => {
        this.setState({
            [event.target.name]: toggled,
        });
    };

这个问题/与第二个方法的混淆部分，是handleToggle方法中的‘...the’将被绑定到错误的值(词法作用域中的' this‘值)...so这个语法在这里是否有效？

怎么一回事？这是我希望理解的其他人的库中的代码。

Answer 1

handleToggle方法到底发生了什么？

这是一个名为的的新特性。目前，ES6类语法只为定义共享方法提供语法支持，而不是为实例方法/属性提供语法支持。这个提议扩展了类语法以支持这一点。

下面是一个简单的例子：

class Foo {
  bar = 42;
}

等同于

class Foo {
  constructor() {
    this.bar = 42;
  }
}

也就是说，这些属性的计算方式就像它们被赋值给构造函数中的this一样。

因此，您的示例等同于

class Component extends React.Component {
  constructor()
    this.handleToggle = (event, toggled) => {
        this.setState({
            [event.target.name]: toggled,
        });
    };
  }
}

由于箭头函数的性质，这会创建“绑定的”实例方法，因此可以传递给其他函数，而不会丢失this的值。

，那么这个语法在这里是有效的吗？

没有正式发布的ECMAScript版本包含此功能，因此严格地说，答案应该是:没有。然而，它是在标准轨道上，所以它很可能是ES2018的一部分。

同时，通过将Babel (无论如何都需要用于React )与transform-class-properties plugin一起使用，可以在您自己的代码中使用此建议。

Answer 2

这里的handleToggle函数使用箭头函数

handleToggle = (event, toggled) => {
    this.setState({
        [event.target.name]: toggled,
    });
};

它有两个参数event, toggled，=>之后的任何参数都是函数体。箭头函数的一个特殊之处在于，它也执行绑定操作。

上述函数的ES5等效项为

handleToggle: function(event, toggled){
    this.setState({
        [event.target.name]: toggled,
    });
};

在调用此函数时，您需要像this.handleToggle.bind(this, value)一样显式绑定它