实用的小功能

我们经常遇到如何在组件多次加载的时候，只初始化一次的情况，结果，发现，目前没有提供现成的api可供使用。所以，这里，我实现了它。

实现原理

让目标函数在多次调用的时候只调用第一次。

实现源码如下

以下两种实现的主要区别是入参的使用方式。第二种更接近原始函数的使用。

export function once(fn: Function, ...args: any[]) {
  let f: any = function () {
    if (f.called) return f.value;
    f.called = true;
    return (f.value = fn.apply(f, args));
  };
  f.called = false;
  return f;
}
export function onceEx(fn: Function) {
  let f: any = function (...args: any[]) {
    if (f.called) return f.value;
    f.called = true;
    return (f.value = fn.apply(f, args));
  };
  f.called = false;
  return f;
}

测试代码

let count1 = 0;
const o = once(function (c: number) {
  console.log('test:once:', c);
}, ++count1);
const o3 = onceEx((c: number) => {
  console.log('test:once:', c);
});
let count2 = 0;
const o2 = (c: number) => {
  console.log('test:once:', c);
};
function test2(): void {
  o();
}
function test3(): void {
  o2(++count2);
}
function test4(): void {
  o3(++count1);
}

源码地址

可能存在的疑问

有人可能会说 React.useState React.useRef 都具有类似的功能，只要组件的生命周期在，那么初始值也只初始化一次。虽然是这样，但是 use 系列的使用是有条件的，必须在组件的顶级作用域中。而 once 只需要是函数就可以。