React 组件属性中的匿名函数性能有多差？

Question

你不应该在反应属性中使用匿名函数，例如

<a onClick=()=>doIt('myId')>Aaron</a>

我理解为什么这会给 React 的协调带来性能问题，因为在每次渲染过程中都会重新创建匿名函数，因此总是会触发某种真正的 DOM 重新渲染。我的问题是，对于一个小组件（即不是每行都有一个链接的表）来说，这是微不足道的吗？我的意思是，React 足够聪明，只是替换处理程序，而不是重新渲染 DOM，对吧？所以成本是不是很高？

原文由 CpnAhab 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我觉得有义务通知您，在渲染中使用 Anonymous function 和 Function.bind(this) 会触发新的渲染。这是因为两者

doIt.bind(this, 'myId') === doIt.bind(this, 'myId') // false

AND

() => doIt('myId') === () => doIt('myId') // false

是假的！

如果你想将某些东西绑定到一个函数，请在 React 类中使用部分应用程序和一个方法。

 class myComponent extends Component {

  doIt = (id) => () => {
    // Do Something
  }

  render() {
    <div>
      <a onClick={this.doIt('myId')}>Aaron</a>
    </div>
  }
}

原文由 Craig1123 发布，翻译遵循 CC BY-SA 3.0 许可协议