10

在创建 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 清理。

对此有什么想法吗?

4

3 回答 3

9

公共类字段语法 (so doSomething = () => {...})还不是 ECMAScript 的一部分,但它做得很好,我非常有信心它会到达那里。

所以使用这种语法会强制你进行转译,但它带来了好处:

  • this用于表达绑定的清晰、简洁的语法
  • 浏览器何时支持此功能的未来证明
  • 不关心执行

对我来说,这是一个明显的胜利。在大多数情况下,您甚至不需要constructor(props),将您从样板super调用中拯救出来。

如果 Babel 实现会导致内存泄漏,您可以确定这些会很快被找到并修复。通过编写更多代码,您更有可能自己创建泄漏。

于 2016-12-29T15:40:01.250 回答
0

这里的链接清楚地强调了“在构造函数中绑定方法”而不是使用箭头函数作为短代码来实现事件绑定是安全的。

这是链接:https ://reactjs.org/docs/react-without-es6.html#autobinding供参考。

于 2019-11-25T10:49:57.327 回答