javascript - 我应该用 useCallback 或 useMemo 包装每个 prop，什么时候使用这个钩子(Hook)？

Question

现在有了 react 钩子(Hook)，我应该在功能组件的情况下用 useCallback 包装通过 props 传递的每个函数吗？以及所有其他 Prop 值 useMemo ？

我的组件内还具有依赖于任何 props 值的自定义函数，我应该用 useCallback 将其包装起来？

有哪些好的做法可以决定使用此钩子(Hook)包装组件中的哪些 props 或 const 值？

如果这可以提高性能，为什么不一直这样做呢？

让我们考虑自定义按钮，我们在其中包装点击处理程序并添加自定义逻辑

function ExampleCustomButton({ onClick }) {
  const handleClick = useCallback(
    (event) => {
      if (typeof onClick === 'function') {
        onClick(event);
      }

      // do custom stuff

    },
    [onClick]
  );

  return <Button onClick={handleClick} />;
}

让我们考虑自定义按钮，我们在其中包装点击处理程序并根据条件添加自定义逻辑

function ExampleCustomButton({ someBool }) {
  const handleClick = useCallback(
    (event) => {
      if (someBool) {
        // do custom stuff
      }
    },
    [someBool]
  );

  return <Button onClick={handleClick} />;
}

在这两种情况下我应该用 useCallback 包装我的处理程序吗？ ？

使用备忘录的类似情况。

function ExampleCustomButton({ someBool }) {
  const memoizedSomeBool = useMemo(() => someBool, [someBool])
  const handleClick = useCallback(
    (event) => {
      if (memoizedSomeBool) {
        // do custom stuff
      }
    },
    [memoizedSomeBool]
  );

  return <Button onClick={handleClick} />;
}

在此示例中，我什至将内存值传递给 useCallback 。

另一种情况，如果组件树中许多组件存储相同的值怎么办？这对性能有何影响？

Answer 1

出于多种原因，不值得:

1. 即使是官方文档也说您应该仅在必要时才这样做。
2. 请记住，过早的优化是万恶之源:)
3. 这使得 DX(开发者体验)变得更差:更难阅读；更难写；更难重构。
4. 在处理原语时(如您的示例)，内存比不内存会消耗更多的 CPU 资源。原始值没有引用的概念，因此它们中没有什么可以内存的。另一方面，内存本身(与任何其他钩子(Hook)一样)确实需要一些微小的处理，没有什么是免费的。尽管它很小，但它仍然比什么都没有(与仅仅传递一个基元相比)要重要，所以你用这种方法会搬起石头砸自己的脚。

将所有内容放在一起 - 如果您想将它们放在任何地方，您会浪费更多的时间来键入所有钩子(Hook)，而不是用户将它们放在应用程序中。古老的好规则仍然适用:衡量，然后优化。