差异性。bind（）到arrow函数（）=>在React中的用法

Question

假设我有一个函数GenerateList（），它更新状态并将其映射到一个onPoint到一个

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

有时我会遇到以下错误：

警告：setState（...）：无法在现有状态转换期间更新（例如在渲染内）。渲染方法应该是道具的纯粹功能...

诸如此类。我在互联网上寻找答案，得到了这样的答案：

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

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

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

主要区别是什么？哪个更合适、更有效？我们为什么要使用这样的。绑定和（）=




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时，才会调用它。但是，在某些情况下，使用匿名函数可能会导致性能问题。该匿名函数将在每次渲染时定义—如果您有一个组件经常重新渲染，则可能会影响应用程序的性能。如果您确信该组件不会经常呈现，那么为了方便起见，匿名函数应该可以。

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

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