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

问题描述

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

.

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:

警告:setState(...):无法在现有状态转换期间更新(例如在render内).Render 方法应该是 props 的纯函数...

诸如此类.我在互联网上寻找答案，并找到了这样的答案，例如:

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 或作为属性时，我们应该使用这样的 .bind 和 () =>一个 React 组件(我主要使用它)?

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.

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

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屋！