React中.bind()和箭头函数()=>的使用区别

Question

假设我有一个名为generateList()的函数，它会更新状态并将其映射为<li>元素的onClick事件。

<li className="some-classname"}  
    onClick={this.generateList('product')}> Product </li>

有时候我会遇到这样的错误：

警告：setState（...）：无法在现有状态转换期间更新（例如在render中）。渲染方法应该是props的纯函数...

我在互联网上搜索解答，找到了像这个答案：

<li className="some-classname"}  
    onClick={this.generateList.bind(this, 'product')}> Product </li>

但我也看到了一个答案（在Github上，但似乎找不到它）：

<li className="some-classname"}  
    onClick={() => this.generateList('product')}> Product </li>

主要区别是什么？哪个更适合和高效？当将函数映射到onClick或作为React组件的属性时（我大多数情况下使用它），我们为什么要使用.bind和() =>这样的东西呢？

- anobilisgorse

---

这个回答是否解决了您的问题？绑定（binding）与箭头函数（arrow-function）（JavaScript或React中的OnClick事件） - Top-Master

Answer 1

如果你尝试：

<li className="some-classname"}  
    onClick={this.generateList('product')}> Product </li>

这个函数将在每次渲染时执行，可能会产生额外的渲染，这就是导致错误的原因。我们想要的是定义一个函数，在onClick被触发时稍后调用。

第二个示例是定义一个方法，.bind将React类this的上下文绑定到该方法。请注意，bind函数返回函数的副本-因此这不会调用函数，而只是为onClick处理程序定义它。

最后一个示例：

<li className="some-classname"}  
    onClick={() => this.generateList('product')}> Product </li>

这定义了一个匿名函数，但与第二个实现类似，不会立即调用它。只有在触发onClick事件时才会调用它。然而，在某些情况下使用匿名函数可能会导致性能问题。该匿名函数将在每次渲染时都被定义 - 如果您有一个组件经常重新渲染，那么它可能会损害应用程序的性能。如果您确信该组件不会经常重新渲染，则可以为方便起见使用匿名函数。

此外，当使用绑定时，您可以在组件类构造函数中声明它，如下所示：

  constructor(props) {
    super(props);
    this.state = {
      // your state
    };
    this.generateList = this.generateList.bind(this);
  }

- erik-sn

---

嘿，我犯了一个错误，抱歉。应该是 () => this.generateList('product')}。 - anobilisgorse

是的，就我对性能而言，我必须始终选择在构造函数中“bind”函数，然后我可以在“render”中自由使用它？ - anobilisgorse

@erik-sn，当使用bind时，函数会像匿名函数一样在每次渲染时被定义吗？ - remy727