javascript - .bind() 与箭头函数 () => 在 React 中的用法的区别

Question

假设我有一个函数 generateList()更新状态并将其映射到 onClick 到 <li>.

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

有时我会遇到如下错误:

Warning: setState(...): Cannot update during an existing state transition (such as within呈现 ). Render methods should be a pure function of props...

诸如此类。我在网上寻找答案，发现了这样的 answer喜欢:

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

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

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

主要区别是什么？哪个更合适和有效？我们应该使用这样的原因是什么 .bind和 () =>将函数映射到 onClick 时还是作为 React 组件的属性(我主要使用它)？

Answer 1

如果你尝试:

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

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

第二个是定义一个方法，.bind 将 React 类 this 的上下文绑定(bind)到该方法。请注意，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);
  }