Reactjs React组件中的ES6和ES8语法

我不熟悉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”值）…那么，该语法在这里是否有效

---

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

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

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

它接受两个参数

事件，切换
，并且
=>
之后的任何参数都是函数体。arrow函数的一个特点是也执行绑定操作

上述功能的ES5等价物为

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

调用此函数时，需要显式绑定它，如
this.handleToggle.bind（this，value）
此处的handleToggle函数使用箭头函数

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

它接受两个参数
事件，切换
，并且
=>
之后的任何参数都是函数体。arrow函数的一个特点是也执行绑定操作

上述功能的ES5等价物为

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

调用此函数时，需要显式绑定它，如
this.handleToggle.bind（this，value）

handleToggle方法到底发生了什么

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

下面是一个简单的例子：

class Foo {
  bar = 42;
}

相当于

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

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

也就是说，这些属性的评估就好像它们被分配给构造函数内部的
此

因此，你的例子相当于

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

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

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

那么这个语法在这里有效吗

没有官方发布的ECMAScript版本包含此功能，因此严格地说，答案应该是：没有。但是，它正在标准化的轨道上，因此它很可能是ES2018的一部分

同时，可以在您自己的代码中使用这个建议，方法是使用Babel（无论如何都需要用于React）和

handleToggle方法到底发生了什么

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

下面是一个简单的例子：

class Foo {
  bar = 42;
}

相当于

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

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

也就是说，这些属性的评估就好像它们被分配给构造函数内部的
此

因此，你的例子相当于

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

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

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

那么这个语法在这里有效吗

没有官方发布的ECMAScript版本包含此功能，因此严格地说，答案应该是：没有。但是，它正在标准化的轨道上，因此它很可能是ES2018的一部分

同时，通过使用Babel（无论如何都需要用于React），您可以在自己的代码中使用此方案。
根据这篇文章，所讨论的snytax是ES8？！np，我认为你展示的ES5等价物不正确根据这篇文章，所讨论的snytax是ES8？！np，我认为您展示的ES5等价物不正确谢谢您的回答，我编辑了标题以反映新的infoFWIW，理论上ES2018将是ES9。最好坚持使用
ES20YY
符号以避免混淆。鉴于该提案处于第二阶段，我不希望它成为ES2017的一部分（但我当然可能错了，没有人能预测未来）；）不过，一个用来指代任何未来提案的术语类似于“ES next”。另请参见标签。感谢您的回答，我编辑了标题以反映新的infoFWIW，理论上ES2018将是ES9。最好坚持使用
ES20YY
符号以避免混淆。鉴于该提案处于第二阶段，我不希望它成为ES2017的一部分（但我当然可能错了，没有人能预测未来）；）不过，一个用来指代任何未来提案的术语类似于“ES next”。另请参见标签。