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>
  );
}

这个问题与可能重复的问题不同，因为可能的重复问题的答案集中在内存占用上。

Answer 1

首先，你设置问题的方式有点不对劲：

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

您的第二个示例<a onClick={() => myHandler(this, foo, bar)} ...>会使用3个参数myHandler，this和foo来调用bar，其中这代表组件上下文。

在理论层面上，你讨论了两个概念：将this绑定到比创建新的匿名绑定函数并在那里调用函数更昂贵的函数？我会说从性能的角度来看，这两种方法非常相似：在这两种情况下，你都要创建一个新函数（func.bind docs）。

任何性能差异都会非常小，以至于您可能永远不会开发出性能至关重要的软件，因此在() => {}和bind之间进行选择会成为一个问题。

如果您希望在此处提高效果，请选择使用class并将点击处理程序绑定到constructor中的上下文。这样，每次渲染时都不需要创建新函数。

希望这有帮助

Answer 2

如果存在差异，差异将会非常小，如果您能够设计一个甚至可以测量的测试，我会非常惊讶，更不用说了。使用对您和同一代码库中的其他人来说更容易理解的版本。

反应性能：绑定与匿名函数

2 个答案: