我应该用useCallback或useMemo包装每个道具，何时使用这个挂钩？

Question

现在react钩子可用了，如果是函数组件，我应该用useCallback包装通过props传递的每个函数，用useMemo包装其他props值吗？

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

什么是好的做法来决定哪些道具或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

我同意@jalooc提出的原则

为了进一步了解OP中展示的用例，以下是我的建议：

function Component() {
  const callback = useCallback(() => { dostuff }, [deps])

  return <Child prop={callback} />
}

如果要渲染的Child是一个非常昂贵的组件，那么上面的说明是有意义的。因此，它可能是这样导出的：

function Child() { 
   ...this takes significant CPU... 
}

// Export as a pure component
export default React.memo(Child)

function Component({ foo }) {
  // This very expensive computation will only run when it's input (foo)
  // changes, allowing Component to re-render without performance issues
  const bar = useMemo(() => {
     ... something very complicated with `foo` ...
  }, [foo])

  return <div>{bar}</div>
}

1. 做有意义的事情，或者做那些衡量糟糕表现的事情

Answer 2

不值得，原因有多种：

1. 甚至官方文件也说，你应该只在必要的时候做

把所有的钩子放在一起——如果你想把钩子放在任何地方，那么键入所有钩子的时间要比用户在应用程序中使用钩子所获得的时间还要多。好的老规则适用于：测量，然后优化。