javascript - react 性能 : bind vs anonymous function

Question

我想知道在 React 组件中使用 bind 和匿名函数之间是否存在性能差异。

具体来说，以下一项是否比另一项更高效？

const MyComponent = ({ myHandler }) => {
  ...
  return (
    <a onClick={myHandler.bind(this, foo, bar)} ...>
      hello world
    </a>
  );
}

const MyComponent = ({ myHandler }) => {
  ...
  return (
    <a
      onClick={() => {
        myHandler(this, foo, bar)
      }
      ...
    >
      hello world
    </a>
  );
}

这个问题与 possible duplicate 不同，因为 possible duplicate 问题的答案集中在内存占用上。

Answer 1

首先，您设置问题的方式有点错误:

你的第一个例子 <a onClick={myHandler.bind(this, foo, bar)} ...>在绑定(bind)到组件上下文的每个渲染器上创建一个新函数，并且始终具有 foo和 bar作为前两个参数。

你的第二个例子 <a onClick={() => myHandler(this, foo, bar)} ...>而是调用 myHandler有 3 个参数，this , foo和 bar ，其中 this 表示组件上下文。

在理论层面上，您讨论的是两个概念:具有约束力 this比创建一个新的匿名绑定(bind)函数并在那里调用该函数更昂贵的函数？我想说，从性能的 Angular 来看，这两种方法非常相似:在这两种情况下，您都在创建一个新函数 ( func.bind docs)。

如果在 () => {} 之间做出选择，任何性能差异都非常小，您可能永远不会开发出如此性能关键的软件。和 bind将是一个问题。

如果您想在这里提高性能，请选择使用 class并将点击处理程序绑定(bind)到 constructor 中的上下文.这样您就不需要在每次渲染时都创建一个新函数。

希望对你有帮助