使用React时最好使用胖箭头函数还是在构造函数中绑定函数？

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

公共类字段语法(so doSomething = () => {...})还不是ECMAScript的一部分,但它做得很好,我相信它会实现.

因此,使用此语法会强制您进行转换,但它带来了优势:

• 表达this绑定的清晰,简洁的语法
• 浏览器支持此功能的未来证据
• 不关心实施

对我来说,这是一个明显的胜利.在大多数情况下,您甚至不需要a constructor(props),从而节省了您的样板super调用.

如果Babel实现会导致内存泄漏,您可以确定这些内容会被快速找到并修复.您不得不编写更多代码来自行创建泄漏.