关于前端:函数缓存

31次阅读

共计 1038 个字符，预计需要花费 3 分钟才能阅读完成。

为了讲明确这个概念，假如你在开发一个天气 app。开始你不晓得怎么做，正好有一个 npm 包里有一个 getChanceOfRain 的办法能够调用：

import {getChangeOfRain} from 'magic-weather-calculator';

function showWeatherReport() {let result = getChangeOfRain();    // 这里调用
  console.log('The change of rain tomorrow is:', result);
}

只是这样会遇到一个问题。无论你做什么，只有调用这个办法就会耗费 100 毫秒。所以，如果某个用户疯狂点击“显示天气”按钮，每次点击 app 都会有一段时间没有响应。

showWeatherReport(); // 触发计算
showWeatherReport(); // 触发计算
showWeatherReport(); // 触发计算

这很不感性。在理论开发中，如果你曾经晓得后果了，那么你不会一次一次的计算结果。重用上次的后果才是上佳抉择。这就是函数缓存。函数缓存也就是缓存函数的结算后果，这样就不须要一次一次的调用函数。

在上面的例子里，咱们会调用 memoizedGetChangeOfRain()。在这个办法里咱们会检查一下是否曾经有后果了，而不会每次都调用getChangeOfRain() 办法：

import {getChangeOfRain} from 'magic-weather-calculator';

let isCalculated = false;
let lastResult;

// 增加这个办法
function momoizedGetChangeOfRain() {if (isCalculated) {
    // 不须要在计算一次
    return lastResult;
  }
  
  // 第一次运行时计算
  let result = getChangeOfRain();
  
  lastResult = result;
  isCalculated = true;
  
  return result;
}

function showWeatherReport() {let result = momoizedGetChangeOfRain();
  console.log('The chance of rain tomottow is:', result);
}

不过这个也不是没事就要用的。只有在状况容许的时候采纳。而且要确定应用了之后有了性能的显著晋升。

原文地址：https://whatthefork.is/memoiz…

正文完