大家好，欢迎来到今天的“前端江湖之记忆宫殿”讲座！我是你们的老朋友，江湖人称“代码老中医”的 Dr. J。今天咱们不聊养生，聊聊前端性能优化的一剂良药——Memoization（记忆化）。
第一章：什么是 Memoization？别告诉我你只记得 Memo
Memoization，这名字听起来是不是像个高深莫测的魔法？其实它一点也不玄乎。简单来说，Memoization 就像一个“缓存小能手”，它会记住函数每次被调用时的输入参数以及对应的结果，下次如果再用相同的参数调用这个函数，它就直接从缓存里拿出结果，而不再重新计算。
想象一下，你去餐馆吃饭，每次都点一样的菜。如果餐馆老板有“记忆化”的本事，他直接就能把你的菜端上来，省去了点单、厨师再做一遍的时间。这就是 Memoization 的核心思想——用空间换时间。
Memoization 的基本原理：
- 存储： 将函数的参数作为 Key，结果作为 Value，存储在一个缓存对象里（通常是一个普通的对象或者 Map）。
- 查找： 每次调用函数时，先在缓存对象里查找是否已经存在相同的参数。
- 命中： 如果找到了，直接返回缓存的结果。
- 未命中： 如果没找到，就执行函数，并将结果存入缓存对象，再返回结果。
第二章：手撕 Memoization：从零开始打造你的“记忆化”神功
理论讲多了容易打瞌睡，咱们直接上代码，手撕一个 Memoization 的函数。
function memoize(func) {
const cache = {}; // 我们的缓存小仓库
return function(...args) {
const key = JSON.stringify(args); // 将参数转换为字符串作为 key，简单粗暴
if (cache[key]) {
console.log(`从缓存中读取结果：${key}`);
return cache[key]; // 命中缓存！
} else {
console.log(`计算新结果：${key}`);
const result = func.apply(this, args); // 调用原始函数
cache[key] = result; // 将结果存入缓存
return result;
}
};
}
// 举个例子，计算斐波那契数列
function fibonacci(n) {
console.log(`计算 fibonacci(${n})`);
if (n <= 1) {
return n;
}
return fibonacci(n - 1) + fibonacci(n - 2);
}
// 使用 memoize 包装 fibonacci 函数
const memoizedFibonacci = memoize(fibonacci);
console.log(memoizedFibonacci(5)); // 第一次调用，计算
console.log(memoizedFibonacci(5)); // 第二次调用，从缓存读取
console.log(memoizedFibonacci(6)); // 第三次调用，计算，会复用之前计算的结果这段代码是不是很简单？ memoize 函数接收一个函数作为参数，返回一个新的函数。这个新函数就是具有“记忆化”能力的函数。 我们使用JSON.stringify把参数转化为字符串来作为key。
代码解读：
cache：一个简单的 JavaScript 对象，用于存储缓存。JSON.stringify(args)：将函数的参数转换为字符串。这是因为 JavaScript 对象不能直接作为对象的 key。 但是如果参数是对象、数组，JSON.stringify无法区分对象属性的顺序是否相同，容易造成缓存污染。func.apply(this, args)：调用原始函数，并将this指向正确的上下文。
第三章：Memoization 的应用场景：哪里需要“记忆化”？
Memoization 并不是万能的，它只适用于某些特定的场景。
1. 纯函数：
Memoization 最适合用于纯函数。纯函数是指那些输入相同，输出永远相同的函数，并且没有副作用。 纯函数更适合使用记忆化，因为它们的输出只依赖于输入，保证了缓存的有效性。
2. 计算密集型函数：
如果你的函数计算量很大，耗时很长，而且经常被用相同的参数调用，那么 Memoization 可以显著提高性能。例如：
- 复杂的数学计算
- 图像处理
- 数据分析
3. 递归函数：
像上面例子中的斐波那契数列，递归计算的过程中会重复计算很多相同的子问题。使用 Memoization 可以避免重复计算，大幅提高效率。
4. React 组件中的性能优化：
这是我们今天讲座的重点！React 组件的渲染也是一个耗时的过程。如果组件的 props 没有变化，我们可以跳过渲染，直接使用之前渲染的结果。这就是 React.memo 和 useMemo 的作用。
第四章：React.memo：给你的组件穿上“防弹衣”
React.memo 是一个高阶组件，它可以对函数组件进行 Memoization。它会浅比较组件的 props，如果 props 没有变化，就跳过渲染，直接使用上次渲染的结果。
import React from 'react';
const MyComponent = React.memo(function MyComponent(props) {
console.log('MyComponent 渲染了！');
return (
<div>
{props.name}: {props.age}
</div>
);
});
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<MyComponent name="Dr. J" age={30} />
<button onClick={() => setCount(count + 1)}>点击我</button>
<p>Count: {count}</p>
</div>
);
}
export default App;在这个例子中，每次点击按钮，App 组件都会重新渲染，但是 MyComponent 组件只有在 name 或 age 发生变化时才会重新渲染。 如果MyComponent的props是对象，浅比较可能永远返回false，那就需要自定义比较函数，
React.memo 的第二个参数：比较函数
React.memo 还可以接收一个比较函数作为第二个参数，用于自定义 props 的比较逻辑。
const MyComponent = React.memo(function MyComponent(props) {
console.log('MyComponent 渲染了！');
return (
<div>
{props.name}: {props.age}
</div>
);
}, (prevProps, nextProps) => {
// 如果 name 和 age 都没变，就返回 true，阻止渲染
return prevProps.name === nextProps.name && prevProps.age === nextProps.age;
});第五章：useMemo：缓存你的计算结果，别让 CPU 过劳
useMemo 是一个 React Hook，它可以缓存计算结果。它接收一个函数和一个依赖项数组作为参数。只有当依赖项数组中的值发生变化时，才会重新执行函数，并更新缓存的结果。
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
// 计算一个复杂的数值
const complexValue = React.useMemo(() => {
console.log('计算 complexValue');
let result = 0;
for (let i = 0; i < 1000000; i++) {
result += i;
}
return result;
}, [count]); // 只有 count 变化时才重新计算
return (
<div>
<p>Complex Value: {complexValue}</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
<p>Count: {count}</p>
</div>
);
}
export default App;在这个例子中，complexValue 只会在 count 发生变化时才会重新计算。否则，它会直接从缓存中读取结果。
useMemo 的使用场景：
- 计算密集型操作： 例如，复杂的数学计算、数据转换等。
- 创建昂贵的对象： 例如，创建大型的数组、对象等。
- 传递给子组件的回调函数： 避免子组件不必要的渲染。
第六章：React.useCallback 与 useMemo 的爱恨情仇
useCallback 和 useMemo 经常一起出现，它们之间有什么区别呢？
useMemo：缓存的是值。useCallback：缓存的是函数。
useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。 它的作用是返回该回调函数的 memoized 版本，该回调函数仅在其中一个依赖项改变时才会更改。当你将回调传递给经过优化的子组件时，它非常有用。
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
// 使用 useCallback 缓存回调函数
const handleClick = React.useCallback(() => {
console.log('Button clicked!');
setCount(count + 1);
}, [count]); // 只有 count 变化时才重新创建函数
return (
<div>
<button onClick={handleClick}>点击我</button>
<p>Count: {count}</p>
</div>
);
}
export default App;在这个例子中，handleClick 函数只有在 count 发生变化时才会重新创建。否则，它会返回缓存的函数。这可以避免子组件因为回调函数的变化而重新渲染。
第七章：Memoization 的注意事项：别把“灵丹妙药”当“大力丸”
Memoization 虽然强大，但也不是所有场景都适用。
1. 缓存失效：
如果函数的输入参数经常变化，那么 Memoization 的效果就会大打折扣，甚至会适得其反。因为每次调用函数都要先查找缓存，如果缓存未命中，还要执行函数，并将结果存入缓存。这反而增加了开销。
2. 内存占用：
Memoization 需要占用额外的内存来存储缓存。如果缓存的数据量很大，可能会导致内存溢出。
3. 复杂参数：
如果函数的参数是复杂的对象或数组，那么比较参数的开销也会很大。这时，需要仔细考虑是否值得使用 Memoization。 浅比较对象时，只有对象的引用地址相同，才认为是相等的。
4. 滥用：
不要为了优化而优化。只有当性能瓶颈确实存在时，才应该考虑使用 Memoization。否则，可能会增加代码的复杂性，反而降低了开发效率。
总结：
| 技术 | 作用 | 适用场景 | 注意事项 |
|---|---|---|---|
memoize 函数 |
缓存函数的计算结果，避免重复计算。 | 纯函数，计算密集型函数，递归函数。 | 缓存失效，内存占用，复杂参数，滥用。 |
React.memo |
对函数组件进行 Memoization，跳过不必要的渲染。 | 组件的 props 很少变化，组件的渲染开销很大。 | 浅比较 props，需要自定义比较函数，滥用。 |
useMemo |
缓存计算结果，避免重复计算。 | 计算密集型操作，创建昂贵的对象，传递给子组件的回调函数。 | 依赖项数组，滥用。 |
useCallback |
缓存回调函数，避免子组件不必要的渲染。 | 将回调函数传递给经过优化的子组件。 | 依赖项数组，滥用。 |
第八章：实战案例：用 Memoization 优化你的 React 应用
为了让大家更好地理解 Memoization 的应用，我们来看一个实战案例。
假设我们有一个 ProductList 组件，它接收一个 products 数组作为 props，并渲染一个商品列表。
import React from 'react';
function ProductItem({ product }) {
console.log(`ProductItem ${product.id} 渲染了！`);
return (
<li>
{product.name} - ${product.price}
</li>
);
}
function ProductList({ products }) {
console.log('ProductList 渲染了！');
return (
<ul>
{products.map(product => (
<ProductItem key={product.id} product={product} />
))}
</ul>
);
}
export default ProductList;如果 products 数组很大，那么每次 ProductList 组件重新渲染，都会导致大量的 ProductItem 组件重新渲染。这会严重影响性能。
我们可以使用 React.memo 来优化 ProductItem 组件。
import React from 'react';
const ProductItem = React.memo(function ProductItem({ product }) {
console.log(`ProductItem ${product.id} 渲染了！`);
return (
<li>
{product.name} - ${product.price}
</li>
);
});
function ProductList({ products }) {
console.log('ProductList 渲染了！');
return (
<ul>
{products.map(product => (
<ProductItem key={product.id} product={product} />
))}
</ul>
);
}
export default ProductList;现在，只有当 product 对象发生变化时，ProductItem 组件才会重新渲染。
我们还可以使用 useMemo 来缓存 products 数组。
import React from 'react';
const ProductItem = React.memo(function ProductItem({ product }) {
console.log(`ProductItem ${product.id} 渲染了！`);
return (
<li>
{product.name} - ${product.price}
</li>
);
});
function ProductList({ products }) {
console.log('ProductList 渲染了！');
return (
<ul>
{products.map(product => (
<ProductItem key={product.id} product={product} />
))}
</ul>
);
}
function App() {
const [products, setProducts] = React.useState([
{ id: 1, name: 'Product 1', price: 10 },
{ id: 2, name: 'Product 2', price: 20 },
]);
const memoizedProducts = React.useMemo(() => products, [products]);
return (
<div>
<ProductList products={memoizedProducts} />
<button onClick={() => setProducts([...products, {id: products.length + 1, name: `Product ${products.length + 1}`, price: (products.length + 1) * 10}])}>添加商品</button>
</div>
);
}
export default App;在这个例子中，memoizedProducts 只有在 products 数组发生变化时才会重新计算。否则，它会直接从缓存中读取结果。
第九章：总结：掌握 Memoization，成为性能优化大师
今天，我们一起学习了 Memoization 的原理、应用场景和注意事项。希望大家能够掌握这项技术，并在实际项目中灵活运用，成为性能优化大师！
记住，Memoization 是一把双刃剑，用得好可以提高性能，用不好反而会降低性能。所以，在使用 Memoization 之前，一定要仔细评估，权衡利弊。
好了，今天的讲座就到这里。感谢大家的聆听！咱们下期再见！
（Dr. J 挥手告别，留下一群还在思考 Memoization 的前端工程师。）