javascript - 使用 React 时，在构造函数中使用粗箭头函数还是绑定(bind)函数更可取？

Question

在创建 React 类时，哪个更可取？

export default class Foo extends React.Component {
  constructor (props) {
    super(props)
    this.doSomething = this.doSomething.bind(this)
  }

  doSomething () { ... }
}

或

export default class Foo extends React.Component {
  doSomething = () => { ... }
}

我的一个同事认为后者会导致内存问题，因为 babel 转译代码以在闭包内捕获 this，而该引用将导致实例不被 GC 清理。

对此有什么想法吗？

Answer 1

公共(public)类字段语法(所以 doSomething = () => {...})是 not yet part of ECMAScript但它做得很好，我非常有信心它会实现这一目标。

因此使用这种语法会强制您进行转译，但它带来了优势:

• 表达this绑定(bind)的清晰、简洁的语法
• 浏览器何时支持此功能的 future 证明
• 不关心实现

对我来说，这是一场明显的胜利。在大多数情况下，您甚至不需要 constructor(props)，从而避免了样板 super 调用。

如果 Babel 实现会导致内存泄漏，您可以确定它们会很快被发现并修复。由于必须编写更多代码，您更有可能自己制造泄漏。