你不应该在react属性中使用匿名函数。
<a onClick=()=>doIt('myId')>Aaron</a>
我理解为什么这会给React的协调带来性能问题,因为匿名函数在每次呈现时都会重新创建,因此总是会触发某种真实的的DOM重新呈现。(即不是每行都有链接的表)这是无关紧要的吗?我的意思是,React足够聪明,只需要替换处理程序,而不需要重新呈现DOM,对吧,所以成本不是很高。
koaltpgm1#
我觉得有义务通知您,在渲染中使用Anonymous function和Function.bind(this)会触发新的渲染。
Anonymous function
Function.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> } }
rryofs0p2#
适用于:
在React documentation about event handling中,您可以找到:在大多数情况下,这是很好的。但是,如果这个回调作为一个 prop 传递给较低的组件,那些组件可能会做额外的重新呈现。我们通常建议在构造函数中绑定或使用类字段语法,以避免这类性能问题。注:React处理回调属性的方式与其他属性相同。它总是比较新旧属性。因此,当匿名函数存在时,它会重新呈现,因为匿名函数总是新创建的。
hkmswyz63#
您的JSX代码示例实际上应该如下所示:
<a onClick={ ()=>doIt('myId') }>Aaron</a>
像这样使用匿名胖箭头函数是完全有效的。你应该在react属性中使用匿名函数。没关系。是的,这不是一个最佳实践。如果你想解决the this context issue when using the ES6 class extends React.Component syntax,我建议你在类构造函数中绑定函数。不,对于一个“小”组件(即不是每行都有链接的表),这不是一个严重的性能问题。
this
3条答案
按热度按时间koaltpgm1#
我觉得有义务通知您,在渲染中使用
Anonymous function
和Function.bind(this)
会触发新的渲染。都是假的!
如果要将某个对象绑定到函数,请对React类中的方法使用partial application。
rryofs0p2#
适用于:
在React documentation about event handling中,您可以找到:
在大多数情况下,这是很好的。但是,如果这个回调作为一个 prop 传递给较低的组件,那些组件可能会做额外的重新呈现。我们通常建议在构造函数中绑定或使用类字段语法,以避免这类性能问题。
注:React处理回调属性的方式与其他属性相同。它总是比较新旧属性。因此,当匿名函数存在时,它会重新呈现,因为匿名函数总是新创建的。
hkmswyz63#
您的JSX代码示例实际上应该如下所示:
像这样使用匿名胖箭头函数是完全有效的。你应该在react属性中使用匿名函数。没关系。
是的,这不是一个最佳实践。如果你想解决the
this
context issue when using the ES6 class extends React.Component syntax,我建议你在类构造函数中绑定函数。不,对于一个“小”组件(即不是每行都有链接的表),这不是一个严重的性能问题。