reactjs - 使用 useCallback 记住切换函数是否有意义？

Question

我正在学习 Advanced React Patterns with Hooks 在线类(class)，在这个早期示例中，他们使用以下 API 创建了一个可扩展组件(比如经典的 Accordion 或可折叠面板):

<Expandable>
    <Expandable.Header>This is the header</Expandable.Header>
    <Expandable.Body>This is the content</Expandable.Body>
</Expandable>

并且他们使用 Context 将状态 expanded 传递给 Expandable 的子级。到目前为止一切顺利:

import React, { createContext, useState } from 'react'

const ExpandableContext = createContext()
const { Provider } = ExpandableContext

const Expandable = ({children}) => {
  const [expanded, setExpanded] = useState(false)
  const toggle = setExpanded(prevExpanded => !prevExpanded)
  return <Provider>{children}</Provider>
}

export default Expandable

然后他们说:

toggle acts as a callback function and it’ll eventually be invoked by Expandable.Header. Let’s prevent any future performance issues by memoizing the callback

const toggle = useCallback(
    () => setExpanded(prevExpanded => !prevExpanded),
    []
)

这让我感到困惑，因为根据 docs useCallback 将返回一个内存版本的回调，只有当其中一个依赖项发生变化时才会改变。但是 toggle 没有任何依赖项，它仍然会产生不同的结果(每次都将 expanded 状态设置为 true 或 false )。

那么，这有什么意义呢？我错过了什么？

Answer 1

当 Expandable 组件中的状态更新时，Expandable 组件将重新渲染。这将导致重新创建 toggle 函数。

为防止这种情况，它被包裹在 useCallback 钩子(Hook)中，这样 toggle 函数就不会在重新渲染时不必要地重新创建。

useCallback 钩子(Hook)用于内存作为 props 传递给子组件的回调。这有助于避免不必要地执行 useEffect Hook 或任何其他依赖于从父组件作为 prop 传递的回调函数的引用标识的代码。