quartz/content/computer_sci/coding_knowledge/js/memoization.md
2024-03-31 15:32:04 +08:00

65 lines
1.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Memoization
tags:
- javascript
- advanced
- coding-language
date: 2024-03-31
---
**记忆化**Memoization是一种优化技术通过存储函数的计算结果避免重复计算相同参数的函数值从而提高代码的执行效率。
> [!note]
> 值得注意的是,记忆化 仅对 纯函数 有效。纯函数的定义为:给定相同的输入,始终返回相同的输出,并且没有任何副作用的函数。
>
> 例如,假设你尝试记忆化不纯的函数 Date.now它返回自 Unix 时间戳以来的当前时间(以毫秒为单位)。
>
> 第一次调用时会正确返回当前时间。但每次后续调用时,它都会错误地返回和第一次相同的值。
# Example
记忆化有在React中运用
```js
const TitleComponent = (props) => {
return <h1>{props.title}</h1>;
};
```
上面的函数将在每次父组件渲染时调用,即使 `title` 没有更改。通过在其上调用 `React.memo`,可以提高性能,避免不必要的渲染。
```js
const TitleComponent = React.memo((props) => {
return <h1>{props.title}</h1>;
});
```
# How to build memoization
## `Fib` function as example
在计算斐波那契数中使用记忆化可以大幅度提高效率
```js
function fib(n) {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
}
fib(100); // 耗时多年
const cache = new Map();
function fib(n) {
if (n <= 1) return n;
if (cache.has(n)) {
return cache.get(n)
}
const result = fib(n - 1) + fib(n - 2)
cache.set(n, result)
return result
}
fib(100) //几乎立即解决
```