缓存函数

• 源码地址： src\shared\util.js
• 描述：为一个纯函数创建一个缓存版本的函数

源码

/**  
 * Create a cached version of a pure function.  
 *   
 * @params { Function } fn 一个函数（注意：这个函数必须是纯函数）  
 * @params { Function } cachedFn 新的函数  
 */  
export function cached (fn: F): F {  
  // 创建一个缓存区  
  const cache = Object.create(null)  
  return (function cachedFn (str: string) {  
    // 获取缓存区中的缓存  
    const hit = cache[str]  
    // 如果命中缓存，直接将缓存输出  
    // 反之，则将执行结果存入缓存，并输出  
    return hit || (cache[str] = fn(str))  
  }: any)  
}

解析

[什么是纯函数]

---

纯函数是所有函数式编程语言中使用的概念，它是函数式编程的基础，它允许你创建简单和复杂的组合模式。

纯函数的概念：

对于一个函数来说，使用相同的输入始终会得到相同的输出，而且没有可观察到的副作用。

纯函数的特性：

输入不便则输出不变。

[形成纯函数的条件]

---

• 返回值只和函数参数有关，与外部无关，相同的参数它应始终返回相同的值。

• 自包含，不依赖于外部状态（不使用全局变量）

• 它不应修改程序的状态或引起的副作用（修改全局变量）

[源码分析]

---

通过 cached 函数将纯函数的执行结果缓存，减少相同内容的函数重复执行。

示例：

假设有一个 camelize 函数，该函数可以将中横线转驼峰。

我们将函数传递字符串 aaa-bbb，那么始终得到的结果都是 aaaBbb, 不会有其他可能。

如果在一个庞大的应用程序中，我们可能需要转义很多次相同的字符串，如果每次都需要重新执行转译程序，那么是一个极大的浪费。

通过 cached 函数，我们只需要转译一次并将结果缓存，当再次需要转义该相同的字符串时，我们只需要从缓存中读取即可。

[源码实现]

---

• 首先创建一个 cache 缓存对象

const cache = Object.create(null)

• 随后返回一个函数 cacheFn

return (function cahceFn(str: string) {  
  const hit = cache[str]  
  return hit || (cache[str] = fn(str))  
}: any)

• cacheFn 与原函数 fn 的区别就在于： 先读取缓存：

const hit = cache[str]

• 如果命中则直接返回缓存的值，否则采用原函数 fn 计算一次并设置缓存，然后返回结果

return hit || (cache[str] = fn(str))