.bind()与箭头函数()的区别=>在React中的用法 [英] Difference of .bind() to arrow function () => usage in React

问题描述

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

Suppose that I have a function generateList() that updates the state and mapping it to an onClick to a <li>.

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

有时候，我会遇到以下错误:

There are times that I encounter errors like:

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

等等.我在互联网上找到了答案，然后遇到了这样的 answer ，例如:

And such. I mined the internet for answers for this, and came upon such answer like:

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

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

But I saw one answer too (in Github, but can't seem to find it) that

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

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

What's the major difference? Which is more appropriate and efficient? And what's the reason that we should use such .bind and () => when mapping a function to an onClick or as a property of a React component (which I mostly use it)?

推荐答案

如果您尝试:

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

该功能将在每个渲染器上执行-可以生成额外的渲染，这就是引发错误的原因.我们想要的是定义一个函数，该函数将在以后触发onClick时被调用.

That function will be executed on every render - which can produce an additional render, which is what throws the error. What we want is to define a function that will be called later when onClick is fired.

第二个是定义一个方法，而.bind是将React类this的上下文绑定到该方法.请注意，bind函数返回一个函数的副本-因此，这不会调用该函数，只是将其定义为供onClick处理程序使用.

The second one is defining a method and .bind is binding the context of the React class this to the method. Note that the bind function returns a copy of a function - So this doesn't call the function, just defines it for the onClick handler to use.

最后一个:

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

这定义了一个匿名函数，但是与第二种实现类似，它没有调用它.仅在触发onClick时才调用它.但是，在某些情况下，使用匿名函数可能会导致性能问题.该匿名函数将在每个渲染器上定义-如果您的组件经常重新渲染，则可能会损害应用程序的性能.如果您确定该组件不会经常显示，那么匿名函数应该很方便.

This defines an anonymous function but, similar to the second implementation, does not call it. Only when onClick is fired is it called. However in some cases using an anonymous function can cause performance issues. That anonymous function will be defined on every render - and if you have a component that is re-rendering very often it can hurt the performance of your application. If you are sure that the component will not be rendered often, an anonymous function should be fine for convenience.

另外，在使用绑定时，您可以在组件类构造函数中声明它，如下所示:

Additionally when using bind you can declare it in the component class constructor like this:

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

这篇关于.bind()与箭头函数()的区别=>在React中的用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！