React 组件属性中的匿名函数性能如何？答案

【问题标题】：How unperformant are anonymous functions in React component attributes?React 组件属性中的匿名函数性能如何？
【发布时间】：2017-02-16 17:12:55
【问题描述】：

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

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

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

【问题讨论】：

doIt('myId')>Aaron 不完全是一个匿名函数
虽然语法稍有错误，但onClick prop 确实有一个匿名函数。它应该是这样的：<a onClick={()=>doIt('myId')}>Aaron</a>
@CpnAhab，my answer 能解决你的问题吗？

标签： javascript reactjs anonymous-function

【解决方案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>
  }
}

【讨论】：

在类中使用箭头函数在后台被转换为该类的属性，因此继承的实例正在创建同一函数的新属性，但是当使用像 doIt() 这样的普通类方法时 {} ，它将被添加到将在该类的实例之间共享的类原型中，这就是为什么我认为使用箭头函数会对某些用例产生负面影响。这是一个解释medium.com/@charpeni/…的链接
这个答案包含为什么！！使用箭头函数会导致重新渲染组件及其子组件。感谢你的回答。正是我想要的。

【解决方案2】：

为：

小组件：一切正常（几乎没有性能问题）
大型组件：越深入越要尽量避免

在React documentation about event handling，你可以找到：

在大多数情况下，这很好。但是，如果此回调作为道具传递给较低的组件，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。

注意：React 处理回调道具的方式与其他道具不同。它总是比较新旧道具。因此，当匿名函数存在时，它会重新渲染，因为匿名函数总是新创建的。

【讨论】：

【解决方案3】：

您的 JSX 代码示例实际上应该如下所示：

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

像这样使用匿名胖箭头函数是完全有效的。你应该在反应属性中使用匿名函数。 没关系。

是的，这不是最佳做法。如果你想解决the this context issue when using the ES6 class extends React.Component syntax我建议你在类构造函数中绑定函数。

不，对于“小”组件（即不是每行都有链接的表），这不是一个无关紧要的性能问题。你很安全。

【讨论】：