我应该在何时使用此钩子时将每个道具用useCallback或useMemo包装起来？

Question

随着反应钩现已我应该在功能部件的情况下，包裹用的道具通过各项功能useCallback并与其他所有的道具价值useMemo？

我的组件中还具有依赖于任何props值的自定义函数，我应该使用useCallback包装它吗？

有什么好的做法来决定使用此钩子从组件中包装哪些prop或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能力。原始值没有 引用 的概念，因此在它们中没有要记住的内容。另一方面，备忘录本身（和其他任何钩子一样） 确实 需要一些微小的处理，没有什么是免费的。即使它很小，也比没有传递任何东西（与仅传递原始图元相比），因此您将用这种方法射击自己的脚。

放在一起-键入所有的钩子比将它们放置在应用程序中的用户花费更多的时间。遵循良好的旧规则：先 测量，然后进行优化 。