【React Hooks原理 - useCallback、useMemo】

useMemo用于缓存计算结果，它只在依赖项发生变化时重新计算
原理：
依赖项检查：useMemo吸收2个参数，一个“创建”函数和一个依赖项数组。依赖项数组中的值在每次渲染时都会被比较，以决定是否需要重新计算
缓存机制：如果依赖项没有发生变化，useMemo会返回上一次计算的结果，而不是重新执行“创建”函数，制止了在组件每次渲染时都举行昂贵的计算
优化渲染：减少了组件的渲染次数

1. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

复制代码

useCallback:用于缓存函数定义。确保依赖项不变的情况下，不会重新创建函数
原理：
依赖项检查：useCallback吸收一个函数和一个依赖项数组，如果依赖项没变化，会返回缓存的函数引用，而不是创建一个新的函数
制止不须要的渲染：在React中，父组件的重新渲染会导致其所有子组件也重新渲染，除非这些子组件的props没有改变，从而制止子组件不须要的渲染
总结：

• useMemo 用于缓存计算结果，制止在每次渲染时重复计算。
  
• useCallback 用于缓存函数定义，制止在每次渲染时创建新的函数实例。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告