我应该在 React 应用程序中删除所有不必要的 usecallback 和 memo 用法吗？

Question

我正在开发一个相对较大的 React 代码库，并且我看到以前的开发人员使用memo并usecallback自由地认为通过使用这些代码可以提高性能。显然不是，这是一个例子

export default function QuestionHelper({ text }: { text: string }) {
  const [show, setShow] = useState<boolean>(false);

  const open = useCallback(() => setShow(true), [setShow]);
  const close = useCallback(() => setShow(false), [setShow]);

  return (
    <span style={{ marginLeft: 4 }}>
      <Tooltip show={show} text={text}>
        <QuestionWrapper
          onClick={open}
          onMouseEnter={open}
          onMouseLeave={close}
        >
          <Question size={16} />
        </QuestionWrapper>
      </Tooltip>
    </span>
  );
}

该应用程序现在可以运行。但我拒绝修复它，因为该应用程序按预期工作。我怎样才能证明我们应该删除代码中所有不必要的memo和？usecallback

是否有客观的方法来说明删除这些内容的好处？

Answer 1

因此，删除示例中的那个实际上可能会改变事情。如果您使用 来记忆它useCallback，则该open函数在渲染之间持续存在，这意味着该函数在每个渲染周期中在内存中保留相同的位置。如果你删除它并且刚刚有

const open = () => setShow(true);

然后，每次组件渲染时，都会重新创建该函数，从而在内存中占据一个新位置。

这有什么意义呢？好吧，假设您的QuestionWrapper组件导出是用 包装的React.memo，因为不必要的重新渲染可能会导致该特定组件出现性能问题。那么，当比较函数和===Javascript 时如何比较对象（函数在技术上是 JS 中的对象）？它进行“引用比较”，即比较两个输入在内存中的地址，看看它是否是同一个对象。在当前代码中，虽然使用 进行记忆useCallback，但在重新渲染之间引用不会更改。但是如果您删除它，那么它的引用将在每次重新渲染时发生变化，并且React.memo将不再起作用，QuestionWrapper因为它会认为每次都会获得一个新对象，即使实际的函数及其逻辑永远不会改变。

现在，也许在您的应用程序中这并不重要，也许QuestionWrapper可以重新渲染很多次而不会出现性能问题，或者该组件可能无论如何都不会被记忆，所以这并不重要，但重点是，总的来说：不要'不要尝试重构/优化不会引起问题的事情，除非不这样做会产生重大影响。

在理想的情况下，您会评估这种情况，是的，也许删除一些记忆在技术上是最好的选择。然而在现实世界中，您继承的代码库充满了不理想的垃圾，但您只是出于多种原因使用它，例如：

• 虽然您认为这可能并不重要，但根据我给出的示例，它有可能会破坏事物或引入错误。安全总比后悔好
• 你一天只有固定的时间，所以你应该优先考虑更有影响力的工作
• 从重构中获得的“改进”是如此之小，可以忽略不计，所以为什么要费心呢？

以及其他各种原因。我知道次优的东西可能有点烦人，我们希望我们的代码超级时尚、结构良好且经过优化，但不幸的是，我们必须面对这样的现实：在大型的实际应用程序中，代码通常是充满了这样的东西。其中一些可能只是其他开发人员的懒惰或无知，或者其中一些实际上可能是出于一个可能不会立即明显的充分理由。

你总是可以自由地表达担忧，但除非你非常有经验并且完全理解这种重构的含义，并且实际上没有更好的事情可做，那么如果每个人都说保持原样，那么最好这样做。几乎可以肯定，你的时间有更好的用途，如果你做了一些事情，比如不小心破坏了应用程序或引入错误，只是为了做一些微小的优化或修复甚至不会引起任何问题的事情，你会让自己变得非常不受欢迎。

另外，根据我使用 React 的经验，bug 是重复的。由于记忆可能会导致奇怪的行为，因此追踪记忆可能是一件非常痛苦的事情。