在使用 useCallback时我们要面临声明依赖项的问题,这里介绍ahook中的 useMemoizedFn的方式,既能保持引用,又不用声明依赖项。
const [state, setState] = useState(''); // func 地址永远不会变化 const func = useMemoizedFn(() => { console.log(state); }); 是不是觉得很神奇,为什么不用声明依赖项也能保持函数引用不变,而内部的变量又可以捕获最新的 state,实际上,这个 hook 的实现异常的简单,我们只需要用到 useRef 和 useMemo。
/* param: fn fn每次进来都是新建,引用会变化 fnRef.current = fn fnRef每次持有的都是新的fn,捕获了最新的闭包变量 memoizeFn.current只会被初始化一次 memoizeFn.current指向的函数每次会去调fnRef.current,这样每次都能用fnRef里的新的fn 这样memoizedFn函数地址不变,同时也捕获了最新的闭包变量 */ function useMemoizedFn(fn) { const fnRef = useRef(fn); fnRef.current = useMemo(() => fn, [fn]); const memoizedFn = useRef(); if (!memoizedFn.current) { memoizedFn.current = function (...args) { return fnRef.current.apply(this, args); } } return memoizedFn.current; } 所有需要用到 useCallback 的地方都可以用 useMemoizedFn 代替。