javascript - React JS 绑定(bind)回调

Question

我们如何实际证明这一点，在每次渲染 react 后都会创建新的回调箭头函数 所以这是一个糟糕的方法。看下面的代码-

class DankButton extends React.Component {
  render() {
    // Bad Solution: An arrow function!
    return <button onClick={() => this.handleClick()}>Click me!</button>
  }

  handleClick() {
    this.logPhrase()
  }

  logPhrase() {
    console.log('such gnawledge')
  }
}

此外，下面的 Arrow 函数类属性函数是如何工作的？

class DankButton extends React.Component {
  render() {
    return <button onClick={this.handleClick}>Click me!</button>
  }

  //  ES6 class property-arrow function! 
  handleClick = () => {
    this.logPhrase();
  }

  logPhrase() {
    console.log('such gnawledge')
  }
}

Answer 1

我不确定我是否理解你的意思

How can we practically prove the point

从您的问题中我了解到，我假设您确实意识到在上面的第一个示例中，正在创建一个函数的新实例。
考虑到这一点，当您考虑它时，在创建和传递 object 或 function 的新实例时至少有 2 个问题:

1. 在大多数情况下可能不太重要，你在每个上消耗更多的内存渲染。

2. 更重要的是(在我看来)你可能会打断 Reconciliation and Diffing Algorithm通过传递一个新的 react prop 在每个渲染上，这将导致重新渲染 child 组件，因此可能会出现性能问题。