我正在优化一个应用程序的性能,我想知道是否可以在不依赖于任何变量的函数上使用Callback钩子。
考虑以下情况:假设我们有一些函数。
const someFunc = () => {
let someVar = "someVal";
/**
* here some extra calculations and statements regarding 'someVar'.
* none of the statements depends on a variable outside this function scope.
*/
return someVar;
};
这个函数不依赖于任何变量,所以我们可以用一个空数组的useCallback来包装它。
const someFunc = useCallback(() => {
let someVar = "someVal";
return someVar;
}, []);
现在我的问题是 - 是否:
const someFunc = () => {
let someVar = "someVal";
return someVar;
};
const someFuncCallback = React.useCallback(someFunc , [])
如果第一种说法为真,那么我们就不应该在不依赖任何其他var的函数上使用Callback,因为无论如何函数都会被重新声明。
但如果第二种说法为真,那么我们应该在任何函数上使用回调钩子,因为声明这些函数比单一的使用回调调用语句更 "昂贵",但我不知道调用反应使用回调有多昂贵(从内存和CPU使用的角度来看)。
returning the cached result when the same inputs occur again
所以,也许我不明白一些东西,他们中哪一个是正确的? 每次你的组件重新渲染时,都会创建一个新的函数实例,useCallback只是一个补充,它将引用分配给另一个变量。.
无论你是否使用Callback,原来的函数都会被重新创建。
同样,在使用 useCallback
react实际上是将传递给它的函数作为参数进行记忆,如果依赖关系没有改变,则在下次重新渲染时返回相同的函数引用。
同时注意,如果你使用了一个 useCallback
函数,如果你把函数作为道具传递给子组件,它也会优化子组件的重渲染。
因此,当你把函数传递给子组件,或者把它作为useEffect或其他用useCallback调用的函数的依赖时,使用useCallback钩子是最佳选择。
查看文档 更多详情.
useCallback将返回一个备忘录化的回调。
useCallback将返回一个回调的备忘版本,只有当其中一个依赖关系发生变化时才会改变。当把回调传递给优化的子组件时,这很有用,因为这些子组件依赖于引用平等,以防止不必要的渲染(例如.
shouldComponentUpdate
).
useCallback(fn, deps)
等同于useMemo(() => fn, deps)
.