Question

我刚刚读过Ract doc on Passing Functions to Components，似乎使用bind和arrow函数都会破坏React的性能优化。

例如，

class Foo extends React.PureComponent {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
  }
}


class Foo extends React.PureComponent {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

我知道的是，当调用render方法时，它们两个都在创建新的回调函数。

对于子组件Button，它会导致额外的渲染吗？假设React.PureComponent和React.memo使用引用检查看看道具是否改变了？
如果这样，额外的渲染是否会同时在两个React的虚拟DOM上发生和实际的DOM？

根据我的实验（基本上使用setInterval来重新创建回调函数），似乎React虚拟DOM具有额外的渲染功能，因为渲染需要额外的调用时间。但是，实际的DOM似乎没有额外的呈现。不知道是不是因为回调函数不是DOM的一部分。

我还想知道防止此类性能问题的通用解决方案。我想到的一种可能的解决方案是缓存回调，这样我们就不需要再次绑定它们了。有更好的解决方案吗？

将功能作为道具传递给React组件将如何影响性能？

0 个答案: