使用React"useCallback"钩子的依赖项作为回调的参数是否更具性能



假设我在React中有一个回调函数,它使用变量abc。我想知道使用useCallback钩子的最佳方法。

我可以创建一个不带参数的回调,并使用[a,b,c]作为依赖数组。

const onMutate = useCallback( () => {~~~~} , [a,b,c] )
~~~~ onPress={onMutate}

或者我可以创建一个回调,它接受参数(a,b,c),并且有一个空的依赖数组。

const onMutate = useCallback( (a,b,c) => { ~~~~} , [] )
~~~~ onPress={() => onMutate(a,b,c)}

在前者中,回调函数每次都是新创建的,但onPress中没有匿名函数。

在后者中,回调函数只创建一次,但每次都会在onPress中创建一个匿名函数。

哪种情况更好?

首先要记住:正如Kent C.Dods所说,使用useCallback并不总是一个好的例子。

然而,如果你真的想使用useCallback,它也只有在useCallback中的值被存储时才有意义。请参阅此CodeSandbox:https://codesandbox.io/s/quizzical-dawn-glqlg


也就是说,如果你确定要使用useCallback,那么无论你走哪条路都无关紧要,因为在最好的情况下,这三个变量在第一次运行时都会被存储。

最新更新