Javascript React中的闭包

对于事件处理程序，可以在react中使用闭包吗？ 例如，我在导航中有一些功能和很多菜单 在导航组件中，我使用如下内容：

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

handleMenuClick（路径）{
return（）=>router.goTo（路径）
}
... 

或者我更喜欢箭头函数

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

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

这一点是，处理程序每次都是相同的函数。如果它是不同的（您上面描述的两种方法都是不同的），那么React将对对象进行不必要的重新渲染，因为它每次都是不同的函数

这里有两篇文章详细介绍：

---

当您在react组件（对象）中定义新方法时，我们知道函数在javascript中是对象

 let reactComponent={
addition: function(){ //some task ...},
render: function(){},
componentWillMount : function(){},
}

因此，每个新方法都应该使用bind在对象中绑定，但是render（）已经定义，所以我们不需要这样做

this.render = this.render.bind(this)

---

对于每个新函数，都需要添加react lifecycle方法，因此，我们使用此.method（）调用对象（构造函数函数）方法。

我不同意第一个方法更干净，两个版本的性能相似。你会没事的。继续编码并继续HM，但下面文章的作者给了我们建议，在需要的地方使用closueres？我知道，当使用闭包时，我们在这里创建新对象，但这给了我们太多的使用空间。我非常简化我的示例，在这个函数中，我可以使用任何想要的东西-使用path操作当前菜单状态，等等阅读本文。他们经历了一些事情，但他们提到箭头函数并不完美。主要的一点是不应该在render函数中创建处理程序。它们应该在构造函数中创建。您可以在

父级的构造函数中创建多个处理程序，如'this.handleClickHome=（）=>this.props.router.go（'/home'）`，但您不想在渲染函数中创建它。但是。。。在本文的最后一段代码中，作者在renderItem（）方法中使用了{this.handleKeyPress（item）}，因此对于render（）函数中的每个项，都创建了自己的处理函数（带有闭包），但我得到了您的意见，感谢您，很明显我没有读足够多的文章=p我不建议他们那样做。让我找一个更好的例子。由于render函数中的绑定，它们显示的代码将导致不必要的渲染。@vanless我链接了两篇不同的文章，这两篇文章做得很好。第二种方法显示了所有不同的方式，并指出了哪些是好的，哪些是坏的。如果我们将es6与

class

语法一起使用，则根本不需要使用

bind（）

方法。但问题不在于此：）

this.render = this.render.bind(this)