React中的闭包

Question

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

handleMenuClick(path) {
  return () => router.goTo(path)
}
... 
<MenuItem
  handleTouchTap={this.handleMenuClick('/home')}
>

或者我应该更喜欢箭头功能？

<MenuItem
  handleTouchTap={() => router.goTo('/home')}
>

第一个变体确实使代码更清晰,但我担心具有大量此类元素的性能

Answer 1

两者都应该避免.

虽然它们都可以工作,但它们都具有相同的弱点,它们会导致不必要的渲染,因为函数是动态创建的,因此会呈现为不同的对象.

而不是其中任何一个,你想要以静态方式创建你的函数,然后传递它们.对于像你MenuItem这样的东西,它应该只获取路径的字符串,然后让代码在里面进行路由.如果它需要路由器,你应该通过它.

然后该函数应该是一个预处理bind函数(通常在构造函数中)并且只是传入.

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>
      );
    }
}

您可以在构造函数中使用箭头函数.这样就不会在每个渲染函数中重新创建它,因此可以避免不必要的渲染.该模式适用于单行简单函数.对于更复杂的函数,您还可以将它们创建为单独的函数,然后bind在构造函数中创建它们.

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/