Question

我最近了解到，将对象文字或函数作为道具传递会导致不必要的重新渲染。当我正在对我的应用程序进行审核时，我发现了一些情况，其中我有一些常见的组件，这些组件对执行不同操作的事件进行回调。我不清楚最优雅的方法是什么。

因此，例如在我的应用程序中，我有一个名为SharedBtn的组件，它在整个应用程序的多个位置和大型循环中使用。此按钮具有onClick侦听器。但是在每个实例中都使用了这个onClick，我们传递了一个不同的函数，每次都做一个不同的事情。

实施例： https://codesandbox.io/s/k31120vnyo

我通过示例阅读了这个相关的article。但他们的解决方案是将onClick逻辑移动到共享组件。这对我来说是丑陋的，因为它在许多不同的地方使用，有许多不同的处理程序。如何在不将点击处理逻辑移动到SharedBtn组件本身的情况下拥有多个点击处理程序？

Answer 1

您可以为每个特殊实例创建一个小包装器组件。

class IndexSharedButton extends React.PureComponent {
  handleClick = e => {
    this.props.onClick(e, this.props.index);
  };
  render() {
    return <SharedBtn copy={this.props.copy} onClick={this.handleClick} />;
  }
}

class AnimalSharedButton extends React.PureComponent {
  handleClick = e => {
    this.props.onClick(this.props.animal, this.props.type);
  };
  render() {
    return (
      <SharedBtn copy={this.props.animal} onClick={this.handleClick} />
    );
  }
}

您也可以手动管理缓存绑定的处理程序，但IMO非常丑陋且不那么惯用。

另外，我认为如果你没有把它作为实际问题来衡量，你根本不应该担心这一点。重新渲染通常不会发生，并且使用shouldComponentUpdate会发生更少。像这样的优化添加更多代码几乎没有什么好处。

Answer 2

大多数情况下，性能影响可以忽略不计。但在钩子时代缓解这种情况的正确方法是通过 useCallback。

import { useCallback } from "react"
const MyComp = () => {
  const func = useCallback(() => doSomething(), []);
  return <OtherComp func={func}/>
};

反应性能并向下传递箭头函数作为道具

2 个答案: