gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 03:56:44 26 4
gpt4 key购买 nike

我正在学习 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 状态设置为 truefalse )。

那么,这有什么意义呢?我错过了什么?

最佳答案

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

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

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

关于reactjs - 使用 useCallback 记住切换函数是否有意义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63728408/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com