函数缓存

时间 2021-06-13

标签 npm 缓存 app 函数性能 code 开发 get console 栏目系统性能繁體版

原文原文链接

为了讲明白这个概念，假设你在开发一个天气app。开始你不知道怎么作，正好有一个npm包里有一个getChanceOfRain的方法能够调用：npm

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(); // 触发计算

这很不理性。在实际开发中，若是你已经知道结果了，那么你不会一次一次的计算结果。重用上次的结果才是上佳选择。这就是函数缓存。函数缓存也就是缓存函数的结算结果，这样就不须要一次一次的调用函数。app

在下面的例子里，咱们会调用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...code