React组件属性中的匿名函数有多么不可靠？

Question

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

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

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

Answer 1

我觉得有必要告诉你，在渲染中使用Anonymous functionandFunction.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>
  }
}

Answer 2

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

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

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

是的，这不是最佳实践。如果你想解决使用 ES6 类扩展 React.Component 语法时的上下文问题，我this建议你在类构造函数中绑定该函数。

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