javascript – React中的闭包

对于事件处理程序,是否可以使用闭包进行反应？
例如,我在导航中有一些功能和很多菜单
在导航组件中我使用这样的东西：

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/