当函数用作私有方法时,我是否可以从 useCallback 获得任何性能提升?
Do I get any performance gain from useCallback when the function is used as a private method?
React 的 useCallback
钩子在将生成的(记忆化的)函数传递给子组件时提供了性能提升,以避免不必要的重新渲染。
当挂钩用作内部(“私有”)函数时,我是否会获得任何性能提升?
例如:
function Foo({numbers}) {
const dep1 = React.useMemo(() => {......}, [....])
const calc = React.useCallback((a) => a * dep1, [dep1])
return (
<>
{numbers.map((num) => (
<div key={num}>
Num: {num}, Calculated: {calc(num)}
</div>
))}
</>
);
}
或者做一个简单的
const calc = (a) => a * dep1
那个案例也一样吗?
换句话说,由于 useCallback
记忆的是函数引用,而不是函数本身,当我不将其作为 prop 传递时是否必须使用它?
对于本地使用(组件内部)useCallback
字面上 doesn't make 任何改进。它会在每次重新渲染时被调用,即使考虑到它会从内存中获取原始函数对象,它仍然会重新创建内联函数。
但是,如果 useMemo
缓存从一些繁重的计算中接收到的值,它就有意义了。它使用记忆原则,这有助于避免冗余的繁重操作。
P.S.
值得注意的是,使用 useCallback
包装私有方法的唯一合理用例是(出于任何原因)您要将此方法放入 useEffect 依赖项中。
React 的 useCallback
钩子在将生成的(记忆化的)函数传递给子组件时提供了性能提升,以避免不必要的重新渲染。
当挂钩用作内部(“私有”)函数时,我是否会获得任何性能提升? 例如:
function Foo({numbers}) {
const dep1 = React.useMemo(() => {......}, [....])
const calc = React.useCallback((a) => a * dep1, [dep1])
return (
<>
{numbers.map((num) => (
<div key={num}>
Num: {num}, Calculated: {calc(num)}
</div>
))}
</>
);
}
或者做一个简单的
const calc = (a) => a * dep1
那个案例也一样吗?
换句话说,由于 useCallback
记忆的是函数引用,而不是函数本身,当我不将其作为 prop 传递时是否必须使用它?
对于本地使用(组件内部)useCallback
字面上 doesn't make 任何改进。它会在每次重新渲染时被调用,即使考虑到它会从内存中获取原始函数对象,它仍然会重新创建内联函数。
但是,如果 useMemo
缓存从一些繁重的计算中接收到的值,它就有意义了。它使用记忆原则,这有助于避免冗余的繁重操作。
P.S.
值得注意的是,使用 useCallback
包装私有方法的唯一合理用例是(出于任何原因)您要将此方法放入 useEffect 依赖项中。