对于事件处理程序,是否可以使用闭包进行反应？
例如,我在导航中有一些功能和很多菜单
在导航组件中我使用这样的东西：
例如,我在导航中有一些功能和很多菜单
在导航组件中我使用这样的东西：
handleMenuClick(path) {
return () => router.goTo(path)
}
...
<MenuItem
handleTouchTap={this.handleMenuClick('/home')}
>
或者我应该更喜欢箭头功能？
<MenuItem
handleTouchTap={() => router.goTo('/home')}
>
解决方法
两者都应该避免.
虽然它们都可以工作,但它们都具有相同的弱点,它们会导致不必要的渲染,因为函数是动态创建的,因此会呈现为不同的对象.
而不是其中任何一个,你想要以静态的方式创建你的函数,然后传递它们.对于类似你的MenuItem,它应该只获取路径的字符串,然后让代码在里面进行路由.如果它需要路由器,你应该通过它.
然后该函数应该是一个预绑定函数(通常在构造函数中)并且只是传入.
export class MenuItem extends React.Component {
constructor() {
this.handleClick = () => this.props.router.go(this.props.path);
}
render() {
return (
<Button onClick={ this.handleClick }>Go to link</Button>
);
}
}
您可以在构造函数中使用箭头函数.这样就不会在每个渲染函数中重新创建它,因此可以避免不必要的渲染.该模式适用于单行简单函数.对于更复杂的函数,您还可以将它们创建为单独的函数,然后在构造函数中将其绑定.
export class MenuItem extends React.Component {
handleClick() {
this.props.router.go(this.props.path);
}
constructor() {
this.handleClick = this.handleClick.bind(this);
}
render() { /* same as above */ }
}
这一点是处理程序每次都是相同的功能.如果它不同(上面描述的两种方法都是这样),那么React会对对象进行不必要的重新渲染,因为每次都会有不同的函数.
这里有两篇文章详细介绍：
> https://ryanfunduk.com/articles/never-bind-in-render/
> https://daveceddia.com/avoid-bind-when-passing-props/
