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

Question

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

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

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

Answer 1

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

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

AND

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

是假的!

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

class myComponent extends Component {

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

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