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方法中的'this'将绑定到错误的值（词法范围'this'值）...这样语法甚至有效这里吗？

发生了什么事？这是我希望了解的其他人的库中的代码。

Answer 1

handleToggle方法究竟发生了什么？

这是一项名为proposal的public class fields新功能。目前，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的一部分。

与此同时，可以使用transform-class-properties plugin使用Babel（无论如何需要用于React）在您自己的代码中使用此提案。

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)

一样明确地绑定它

React Component中的ES6和ES8语法

2 个答案: