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 {渲染{1}}

等等。我在互联网上挖掘了这个问题的答案，然后发现了这样的answer：

). Render methods should be a pure function of props...

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

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

主要区别是什么？哪个更合适，更有效？在将函数映射到<li className="some-classname"} onClick={() => this.generateList('product')}> Product </li>或作为React组件的属性（我主要使用它）时，我们应该使用.bind和() =>的原因是什么？？

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

.bind（）与箭头函数的差异（）=＆gt;在React中的用法

1 个答案: