我应该将组件中定义的所有函数包装在 useCallback 中吗？答案

【问题标题】：Should I wrap all functions that defined in component in useCallback?我应该将组件中定义的所有函数包装在 useCallback 中吗？
【发布时间】：2019-12-01 01:16:16
【问题描述】：

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

import React from 'react'

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

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

   return (
      //something
   )
}

【问题讨论】：

标签： reactjs react-hooks usecallback

【解决方案1】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

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

在以下情况下应该首选使用useCallback

如果您将函数作为道具传递给子组件，并且子组件通常不需要重新渲染，除非某个道具更改，那么 useCallback 可能会阻止某些重新渲染。但是，如果您声明很复杂，并且需要将多个此类函数作为道具传递给子组件，则最好转移到 useReducer 而不是 useState 并将 dispatch 方法传递给子组件
您正在指定一个函数作为useEffect 的依赖项。在这种情况下，您必须确保不会在每次渲染时重新创建函数，否则每次渲染都会触发 useEffect。

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

【讨论】：