如何使 JavaScript function 僅在參數更改時運行

Question

我正在使用 React，每次發生變化時都會渲染整個組件。 雖然我有一個最小的組件，但它運行一個沉重的 function。 如果它的參數沒有改變，我不希望這個 function 在每個渲染上運行。 類似React.memo的東西（如果組件的 props 沒有改變，基本上不會重新渲染組件）。 static JavaScript 函數是否有等效的React.memo ？

注意：我不想引入諸如reselect之類的庫。 一定有更好的方法！

---

編輯：我覺得我不太清楚我在尋找什么。 讓我用一個例子來問這個問題，

https://codesandbox.io/s/react-typescript-2xe2m?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark

每次我點擊+或-時，它都會運行pleaseMemoizeThisFunction function，即使它的參數沒有改變。 我怎樣才能讓這個 function 僅在其任何參數更改時運行。

Answer 1

這是一個簡單的記憶實現，檢查 function 是否與上次使用相同的 arguments 調用，並且僅在它們不同時重新計算結果。

在您的沙箱中看到您使用 Typescript，我已將類型添加到此 function。

function memo<A extends any[], R>(fn:(...args:A) => R) {
  let value:R, 
    before: A = {length:NaN} as any;

  const sameAsBefore = (v:A[number], i:number) => v === before[i];
  function memoized (...args:A):R {
    if (args.length !== before.length || !args.every(sameAsBefore)) {
        before = args;
        value = fn.apply(this, args);
    }
    return value;
  }


}

用法：

const pleaseMemoizeThisFunction = memo((a: string, b: string): string => {
  console.count("function run: ");
  // it will do some heavy stuff here
  return `I am done with ${a} and ${b}`;
});

或者像this.someMethod = memo(this.someMethod);

Answer 2

在你的函數周圍使用 useMemo 鈎子，除非參數發生變化，否則它不會運行。 https://reactjs.org/docs/hooks-reference.html#usememo

const 計算 = useMemo(() => calculateExpensive(param1, param2), [param1, param2]);