我应该将这个函数封装在useCallback中吗？

Question

我对useCallback的工作原理有相当好的理解。然而，在我和我的同事中，弄清楚什么时候使用它似乎是主观的。我很好奇其他人对我们目前的困境有什么看法。

假设我们有一个组件，它将一个操作分派到redux，这是被选中的结果：

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

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

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

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

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

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

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

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

一些注意事项：

• useDispatch返回具有稳定标识
• 的dispatch函数，在没有useCallback

的情况下不会出现重路由或性能问题。

编辑

为了澄清，这是一个问题，我们是否应该回忆录一个函数的基础上，保持一个稳定的身份，当传递给一个子组件，即使组件树不期望改进型的任何原因。

Answer 1

只有当handleSelect也被回忆录的时候，对Select的追忆才会起作用。记住-当组件重新呈现它时，默认情况下也重新呈现它的所有子程序的(不管它们的道具是否改变)。

因此，如果不知道Select是如何实现的，我们就不能说如果useCallback“更好”，它实际上是否有任何影响。

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

Answer 2

和我的问题一样，我只是找到了答案：“分派将始终是相同的函数引用。(实际上，在Redux的早期版本中，禁止传递新的存储引用。我们现在支持在运行时更改它，但现实地说，您可能不会这么做。)

但是，ESLint规则不知道--它只知道分派不是内置的React钩子返回值，因此它可能会改变，因此它告诉您，应该将它添加到依赖项数组中，以防发生变化。“