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

Question

创建 React class 时，哪个更可取？

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

渲染函数中的绑定会导致在每次渲染时创建新函数，这意味着差异算法认为存在变化。当您在构造函数中绑定时，这不会发生。

在这里您可以看到使用箭头绑定和在构造函数中绑定的编译差异： 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 2

public class 字段语法（所以 doSomething = () => {...}）是 not yet part of ECMAScript 但它运行良好，我非常有信心它会到达那里。

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

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

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

如果 Babel 实现会导致内存泄漏，您可以肯定会很快找到并修复这些泄漏。您更有可能因为不得不编写更多代码而自己制造泄漏。

Answer 3

这里的link明确强调，官方是安全的"Bind methods in constructor"而不是使用箭头函数作为短代码实现事件绑定

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