reactUse createMemo介绍创建一个记忆化函数。记忆化函数会缓存其计算结果，并在后续相同的输入参数被传入

介绍

创建一个记忆化函数。记忆化函数会缓存其计算结果，并在后续相同的输入参数被传入时直接返回缓存的结果，而不重新计算。

const useMemoFn = createMemo(fn);

源码

import { useMemo } from 'react';

const createMemo = <T extends (...args: any) => any>(fn: T) =>
  (...args: Parameters<T>) => useMemo<ReturnType<T>>(() => fn(...args), args);

export default createMemo;

思考

useMemo

当组件重新渲染时，需要再次用到这些函数返回值，此时 useMemo 的函数不再重新执行一遍运算，而是直接使用之前运算过的返回值。

const xxxValue = useMemo(() => {
    let result = xxxxx;
    //经过复杂的计算后
    return result;
}, [xx]);

createMemo

上面 useMemo 例子是对函数固定返回值的缓存，如果函数参数不同返回值也不同，并且对不同返回值都缓存时，就可以使用 createMemo。