ht_hooks/es/useMemoizedFn/index.js

ht React 业务 Hooks

import { useMemo, useRef } from 'react';
import { isFunction } from '../utils';
import isDev from '../utils/isDev';
function useMemoizedFn(fn) {
  if (isDev) {
    if (!isFunction(fn)) {
      console.error("useMemoizedFn expected parameter is a function, got ".concat(typeof fn));
    }
  }
  var fnRef = useRef(fn); //!使用useRef在fnRef.current中保存参数函数，保持在组件的生命周期中，而不因渲染而重置且一直是最新的
  // why not write `fnRef.current = fn`?
  // https://github.com/alibaba/hooks/issues/728
  fnRef.current = useMemo(function () {
    return fn;
  }, [fn]); //!只有参数函数变化时才更新fnRef.current，但只是更新内容，fnRef.current地址始终不变
  var memoizedFn = useRef();
  if (!memoizedFn.current) {
    //若ref不存在才创建
    memoizedFn.current = function () {
      var args = [];
      for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
      }
      return fnRef.current.apply(this, args); //创建的始终是最新的，不需要useCallback中dependence关联
    };
  }
  return memoizedFn.current;
}
export default useMemoizedFn;