.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...

诸如此类。我在网上搜索了这个问题的答案，然后发现这样的：

<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 和 () => 的原因是什么？？

Answer 1

如果你尝试：

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

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

第二个是定义方法，.bind 将 React class this 的上下文绑定到该方法。请注意 bind 函数 returns 函数的副本 - 所以这不会调用该函数，只是定义它供 onClick 处理程序使用。

最后一个：

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

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

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

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

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

Difference of .bind() to arrow function () => usage in React

javascript

reactjs

binding

arrow-functions