使用箭头函数在反应组件中绑定函数而不是在构造函数中绑定[重复]答案

【问题标题】：Using arrow function to bind functions in react component instead of bind in the constructor [duplicate]使用箭头函数在反应组件中绑定函数而不是在构造函数中绑定[重复]
【发布时间】：2018-03-04 15:41:11
【问题描述】：

我一直在做以下事情来在 React 组件中绑定一个函数的 this

this.updateInput = this.updateInput.bind(this);

但是我已经看到越来越多的构造函数之外的箭头方法像这样

updateInput = () => ( code here )

但是当我在我的代码中尝试这个时，它会抛出一个语法错误。为什么？

【问题讨论】：

“但是当我在我的代码中尝试这个时，它会抛出一个语法错误”。展示一个例子，你是如何使用它的
标记为与@Traktor53 提到的重复。

标签： javascript reactjs ecmascript-6

【解决方案1】：

我相信你指的是这样的语法：

class MyClass {
    constructor() {

    }
    myBoundFunction = () => { //<--- this line inside of a class

    }
}

将箭头函数声明为类定义的一部分是一项实验性功能，它不是 javascript 语言的标准部分，这就是您看到语法错误的原因。如果要使用这种语法，可以使用Babel's transform-class-properties feature

如果你不使用 babel，那么你需要在你的构造函数中手动绑定函数。

【讨论】：

您认为在 React 中解决这个问题的最佳方法是什么？我接受了一次采访，被问到为什么我使用.bind(this) 而不是箭头函数。
在构造函数中执行.bind(this)与在构造函数中创建箭头函数与使用babel使用上述特殊语法之间的区别在我看来可以忽略不计。他们基本上都在做同样的事情，只是语法不同，所以选择主要归结为您和您的团队最容易理解的选择。值得一提的是，react 网站上的大多数示例都使用 .bind(this)
您确实要确保的一件事是，无论您使用哪种方法，您都可以在构造函数中执行它（或 babel 方式，它转换为在构造函数中执行它）。这样，对于类的每个实例只需执行一次。如果您多次进行绑定（例如，在每次渲染调用中），那么您可能会对性能产生影响。

【解决方案2】：

您只想在类构造函数中使用.bind(this)。
你要么想使用this.updateInput要么() => updateInput()
如果你想使用this.updateInput，你必须在你的类中将它定义为updateInput = () => ( code here )，然后在你的类中使用它作为onSomething={updateInput]。
如果它抛出语法错误。当您在构造函数中绑定this 时，您的事件处理程序已准备好做一些事情。你所要做的就是eventHandler={this.updateInput}

【讨论】：