我应该将此 function 包装在 useCallback 中吗？

Question

我对useCallback的工作原理有相当的了解。 不过，在我和我的同事中，弄清楚何时使用它似乎是主观的。 我很好奇其他人如何看待我们目前的困境。

想象一下，我们有一个组件正在向 redux 发送一个操作，因为选择了一些东西：

const SelectionComponent = props => {
  const dispatch = useDispatch()

  const handleSelect = (selection) => {
    dispatch(actions.updateSelection(selection))
  }

  return <Select onSelect={handleSelect} ... />
}

我的同事认为我们应该将handleSelect包装在useCallback中，以确保 function 具有稳定的身份，因为它作为回调传递给子组件：

const SelectionComponent = props => {
  const dispatch = useDispatch()

  const handleSelect = useCallback((selection) => {
    dispatch(actions.updateSelection(selection))
  }, [dispatch])

  return <Select onSelect={handleSelect} ... />
}

所以我的问题是，哪个是更好的解决方案，为什么？

一些注意事项：

• useDispatch 返回一个具有稳定身份的dispatch function
• 没有 useCallback 就不会发生重新渲染或性能问题

编辑

澄清一下，这是一个关于我们是否应该在传递给子组件时保持稳定身份的基础上记忆 function 的问题，即使组件树不会因任何原因重新渲染。

Answer 1

只有当Select也被记忆时，记忆handleSelect才会有所不同。 请记住 - 当一个组件重新渲染时，它也会默认重新渲染它的所有子组件（无论它们的 props 是否更改）。

因此，在不知道Select是如何实现的情况下，我们真的不能说useCallback真的有任何影响，如果它“更好”的话。

通常，这种类型的优化是不必要的。 除非您的Select在某些方面复杂或昂贵，否则您可能也不需要记忆。