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

IT技术 javascript reactjs binding arrow-functions
2021-04-13 04:17:10

假设我有一个函数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>

主要区别是什么？哪个更合适、更有效？什么是我们应该用这样的理由.bind和() =>映射功能的时候onClick或者的属性作出react成分（我主要是使用它）？

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在构造函数中选择该函数，然后我可以在render?
2021-05-29 04:17:10
嘿，我弄错了，对不起。它应该是() => this.generateList('product')}。
2021-05-30 04:17:10
@erik-sn，当使用绑定时，该函数将像匿名函数一样在每个渲染上定义？
2021-06-19 04:17:10
其它你可能感兴趣的问题
上一篇Mock React useRef 或带有酶和笑话的功能组件内的函数？ 下一篇React - 数组或迭代器中的每个孩子都应该有一个唯一的“键”props