ht_hooks/lib/useMemoizedFn/index.js

ht React 业务 Hooks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _react = require("react");
var _utils = require("../utils");
var _isDev = _interopRequireDefault(require("../utils/isDev"));
function useMemoizedFn(fn) {
  if (_isDev["default"]) {
    if (!(0, _utils.isFunction)(fn)) {
      console.error("useMemoizedFn expected parameter is a function, got ".concat((0, _typeof2["default"])(fn)));
    }
  }
  var fnRef = (0, _react.useRef)(fn); //!使用useRef在fnRef.current中保存参数函数，保持在组件的生命周期中，而不因渲染而重置且一直是最新的
  // why not write `fnRef.current = fn`?
  // https://github.com/alibaba/hooks/issues/728
  fnRef.current = (0, _react.useMemo)(function () {
    return fn;
  }, [fn]); //!只有参数函数变化时才更新fnRef.current，但只是更新内容，fnRef.current地址始终不变
  var memoizedFn = (0, _react.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;
}
var _default = exports["default"] = useMemoizedFn;