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

a7qyws3x  于 2023-02-22  发布在  React
关注(0)|答案(3)|浏览(145)

你不应该在react属性中使用匿名函数。

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

我理解为什么这会给React的协调带来性能问题,因为匿名函数在每次呈现时都会重新创建,因此总是会触发某种真实的的DOM重新呈现。(即不是每行都有链接的表)这是无关紧要的吗?我的意思是,React足够聪明,只需要替换处理程序,而不需要重新呈现DOM,对吧,所以成本不是很高。

koaltpgm

koaltpgm1#

我觉得有义务通知您,在渲染中使用Anonymous functionFunction.bind(this)会触发新的渲染。

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

AND

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

都是假的!
如果要将某个对象绑定到函数,请对React类中的方法使用partial application。

class myComponent extends Component {

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

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

rryofs0p2#

适用于:

  • 较小组件:你可以(几乎没有性能问题)
  • 大型组件:你越深入就越想避开它

React documentation about event handling中,您可以找到:
在大多数情况下,这是很好的。但是,如果这个回调作为一个 prop 传递给较低的组件,那些组件可能会做额外的重新呈现。我们通常建议在构造函数中绑定或使用类字段语法,以避免这类性能问题。
注:React处理回调属性的方式与其他属性相同。它总是比较新旧属性。因此,当匿名函数存在时,它会重新呈现,因为匿名函数总是新创建的。

hkmswyz6

hkmswyz63#

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

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

像这样使用匿名胖箭头函数是完全有效的。你应该在react属性中使用匿名函数。没关系
是的,这不是一个最佳实践。如果你想解决the this context issue when using the ES6 class extends React.Component syntax,我建议你在类构造函数中绑定函数。
不,对于一个“小”组件(即不是每行都有链接的表),这不是一个严重的性能问题。

相关问题