使用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

公共类字段语法（所以AppDelegate）是not yet part of ECMAScript，但它运作良好，我相信它会到达那里。

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

• 用于表达doSomething = () => {...}绑定
的清晰，简洁的语法
• 浏览器何时支持此
的未来证明
• 不关心实施

对我来说，这是一个明显的胜利。在大多数情况下，您甚至不需要this，从而节省了您的样板constructor(props)电话。

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

Answer 2

渲染函数中的绑定会导致在每个渲染上创建新函数，这意味着diffing算法认为存在更改。当你在构造函数中绑定时，这不会发生。

在这里，您可以看到在构造函数中使用箭头和绑定进行绑定的编译差异： https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&experimental=true&loose=false&spec=false&code=class%20x%20extends%20React.Component%20%7B%0A%20%20constructor%20(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20%0A%20%20%20%20this.onChange%20%3D%20this.onChange.bind(this)%3B%0A%20%20%7D%0A%20%20%0A%20%20onChange%20()%20%7B%20console.log(%27change%20x%27)%3B%20%7D%0A%7D%0A%0Aclass%20y%20extends%20React.Component%20%7B%0A%20%20onChange%20%3D%20()%20%3D%3E%20%7B%20console.log(%27change%20y%27)%3B%20%7D%0A%7D

Answer 3

此处的链接清楚地表明，正式而言，“在构造函数中绑定方法”是安全的，而不是使用arrow函数作为简短的代码来实现事件绑定。

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