Question

我正在学习带钩高级反应模式在线课程，并且有一个早期的示例，其中他们使用以下API创建了Expandable组件（例如经典的手风琴或可折叠面板）：

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

他们正在使用上下文将状态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用作回调函数，最终将由Expandable.Header调用。 让我们记住回调，以防止将来出现任何性能问题

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

这使我感到困惑，因为根据docs useCallback将返回一个已记忆的回调版本，该回调版本仅在其中一个依赖项已更改时才会更改。但切换不会t具有任何依赖性，并且仍然会每次产生不同的结果（将expanded的状态设置为true或false）。

那么，这有什么意义呢？我想念什么？

Answer 1

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

为防止这种情况，将其包装在useCallback挂钩中，以免在重新渲染时不必要地重新创建toggle函数。

useCallback钩子用于记住作为道具传递给子组件的回调。这可以帮助避免不必要地执行useEffect钩子或任何其他依赖于从父组件作为道具传递的回调函数的引用标识的代码。

用useCallback记住切换功能是否有意义？

1 个答案: