13

据我所知，在 React 的功能组件中定义的函数会在组件重新呈现时重新生成。由于 useCallback 可以由特定的依赖项触发，因此可以防止不必要地重新生成这些函数。我应该将它们中的每一个都包装在 useCallback 中，并传递相关的依赖项吗？

import React from 'react'

const Comp = () => {
   const fn1 = useCallback(
     ()=>{
      // do something
　　　}, [dependency1])

   const fn2 = useCallback(
     ()=>{
      // do something
　　　}, [dependency2])

   return (
      //something
   )
}
4

2 回答 2

26

useCallback当功能组件重新渲染时，将有助于避免重新生成功能。但是，重新创建功能并没有太大的性能差异。

在以下情况下应优先使用 useCallback

  1. 如果您将函数作为道具传递给子组件，并且子组件通常不需要重新渲染，除非某个道具更改，那么 useCallback 可能会阻止某些重新渲染。但是，如果您声明很复杂并且您需要将多个此类函数作为道具传递给子组件，则最好转移到useReducer而不是useState将方法传递dispatch给子组件

  2. 您正在指定一个函数作为useEffect. 在这种情况下，您必须确保不会在每次渲染时重新创建函数，否则useEffect将在每次渲染时触发。

useCallback总体而言，必须明智地做出使用决定而不是盲目地做出使用决定，因为您可能会过度使用所提供的优势useCallback并最终降低性能，因为useCallback还会记住函数，并且经常更改的依赖项可能无论如何都需要重新创建函数。

于 2019-07-23T04:23:04.153 回答
0

只需在上述答案中添加另一个案例。有时你可能有一个计算量很大的函数，你可能不希望它在每次渲染时计算结果，所以在这种情况下你也可以使用useCallback

于 2021-11-02T01:26:35.710 回答