Question

我们怎样才能切实证明这一点，每次渲染后反应都会产生新的回调箭头功能 所以这是一个糟糕的方法。见下面的代码 -

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

我不确定我完全理解你的意思

我们怎样才能切实证明这一点

正如我从你的问题中理解的那样，我认为你确实意识到在上面的第一个示例中，正在创建一个新的函数实例。
考虑到这一点，当您考虑它时，在创建并传递object或function的新实例时至少会遇到2个问题：

在大多数情况下可能不那么重要，每个人都会消耗更多内存渲染。
更重要的是（在我看来）你可能会中断 Reconciliation and Diffing Algorithm通过传递新的反应每个渲染的道具，这将导致重新渲染孩子组件，因此可能出现性能问题。

Answer 2

箭头函数类属性函数确实有效。

抱歉，使用bind时不知道如何证明新的函数实例，但我可以做后者。

您的箭头函数中的

console.log this，并将其与作为常规函数执行的操作进行比较。不要在任何时候使用bind。箭头函数的this将是组件的上下文，而基于function的那个将是window或undefined。

React JS绑定回调

2 个答案: