React useMemo和useCallback都是为了提升性能的hooks(各自应用场景思考)

一、共同点:

而 useMemo 和 useCallback 可以用来解决函数组件更新过程中的性能问题。

useMemo 和 useCallback 都会在组件第一次渲染的时候执行,之后会在其依赖的变量发生改变是再次执行。并且这两个 hooks 都是返回缓存的值。useMemo 返回的是缓存的变量,而 useCallback 返回的是缓存的函数。

即:为了避免父组件的props或者state改变,让它的子组件每次均要刷新(前提是父组件的发生变化props或者state可能和子组件的无关),这时候就需要useMemo和useCallback

控制子组件是否有必要重新渲染。

二、useMemo的应用场景:某一个状态需要根据其它状态进行计算时。

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

useMemo 传入一个函数和依赖数组,返回一个缓存的变量值

把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

三、useCallback的应用场景:这个用的多,父子组件回调函数用时。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback 传入一个函数和依赖数组,返回一个缓存后的函数。

把内联回调函数及依赖项数组作为参数传入 useCallback ,它将返回该回调函数的 memoized 版本, 该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避 免非必要渲染(例如 shouldComponentUpdate )的子组件时,它将非常有用。

使用场景是:有一个父组件,其中包含子组件,子组件接收一个函数作为props;通常而言,如果父组件更新了,子组件也会执行更新;但是大多数场景下,更新是没有必要的,我们可以借助useCallback来返回函数,然后把这个函数作为props传递给子组件;这样,子组件就能避免不必要的更新。

 

四.总结:

一句话:useCallback 缓存钩子函数,useMemo 缓存返回值(计算结果)。

 

 

上一篇:The Buses POJ - 1167


下一篇:Podman : Synopsis