时间戳

首页 > 解决方案 > 如何使 JavaScript 函数仅在参数更改时运行

javascript - 如何使 JavaScript 函数仅在参数更改时运行

问题描述

我正在使用 React，每次发生变化时都会渲染整个组件。虽然我有一个尽可能小的组件，但它运行的功能很重。如果它的参数没有改变，我不希望这个函数在每个渲染上运行。类似的东西React.memo（如果组件的道具没有改变，基本上不会重新渲染组件）。React.memo静态 JavaScript 函数是否有等价物？

注意：我不想引入诸如reselect. 一定有更好的方法！

编辑：我觉得我不太清楚我在寻找什么。让我用一个例子来问这个问题，

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

每次我单击+or-时，它都会运行该pleaseMemoizeThisFunction函数，即使它的参数没有改变。我怎样才能让这个函数只在它的任何参数发生变化时运行。

标签： javascriptreactjs

解决方案

这是一个简单的 memoization 实现，它检查函数是否使用与上次相同的参数调用，并且仅在它们不同时重新计算结果。

在您使用 Typescript 的沙箱中看到，我已将类型添加到此函数中。


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);

推荐阅读