ReactJS - 使用useMemo：初学者指南

你好，有抱负的React开发者们！今天，我们将深入了解React的一个强大钩子：useMemo。如果你是编程新手，不用担心；我会一步步引导你理解这个概念，就像我在多年教学中对无数学生所做的那样。所以，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们一起踏上这段激动人心的旅程！

useMemo是什么？

在我们深入了解之前，让我们先了解一下useMemo的概念。想象一下你在烤饼干（我喜欢这个类比，因为，好吧，谁不喜欢饼干呢？）。你有一个食谱，需要一些复杂的计算来确定完美的巧克力豆数量。现在，你会每次烤饼干时都重新计算这个数量，还是会写下来重复使用？这正是useMemo所做的——它记住（或“缓存”）了一个计算的结果，这样你就不必不必要地重复它。

在React术语中，useMemo是一个钩子，它允许你在重新渲染之间缓存一个计算的结果。就像拥有一个超级聪明的助手，帮你记住复杂的任务！

useMemo钩子的签名

让我们看看如何实际使用useMemo钩子：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

别慌！我知道这可能一开始看起来有点吓人，但让我们分解一下：

1. useMemo是我们钩子的名字。
2. 它接受两个参数：

• 一个执行我们计算的函数（() => computeExpensiveValue(a, b)）
• 一个依赖数组（[a, b]）

3. 它返回一个缓存值。

可以这样理解：useMemo在说，“嘿，React，只有当a或b发生变化时，才重新运行这个计算。否则，就给我你上次记住的结果。”

应用useMemo钩子

现在，让我们通过一个现实世界的例子来看看useMemo的实际应用。想象我们正在为一个在线商店构建一个购物车。

import React, { useMemo, useState } from 'react';

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "React T-Shirt", price: 20 },
{ id: 2, name: "React Hoodie", price: 40 },
{ id: 3, name: "React Cap", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("计算总价...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2>您的购物车</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>总价: ${totalPrice}</h3>
</div>
);
}

让我们分解一下：

1. 我们有一个带有一些商品的购物车，每个商品都有名称和价格。
2. 我们使用useMemo来计算购物车中所有商品的总价。
3. 只有当cart发生变化时，这个计算才会重新运行（这就是最后面的[cart]的作用）。
4. 我们显示每个商品和总价。

现在，这有什么用呢？想象一下，如果计算总价是一个非常复杂的操作（可能涉及折扣、税费等）。没有useMemo，React会在每次组件重新渲染时重新计算这个值，即使购物车没有变化。有了useMemo，它只在必要时重新计算，可能会节省大量的处理时间！

保持引用

useMemo的另一个超级酷的特性是它能够保持引用。你在想，“这是什么？”让我用另一个例子来解释。

想象一下你正在构建一个待办事项列表应用（因为每个程序员都在某个时刻构建过这样一个应用，相信我！）。你想要根据任务的状态来过滤它们。

import React, { useMemo, useState } from 'react';

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "学习React", completed: false },
{ id: 2, text: "构建惊人的应用", completed: false },
{ id: 3, text: "改变世界", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("过滤待办事项...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2>我的待办事项列表</h2>
<button onClick={() => setFilter('all')}>全部</button>
<button onClick={() => setFilter('active')}>活跃</button>
<button onClick={() => setFilter('completed')}>已完成</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

在这个例子中：

1. 我们有一个待办事项列表和一个过滤器状态。
2. 我们使用useMemo来创建一个基于当前过滤器的过滤后的待办事项列表。
3. 只有当todos或filter变化时，过滤后的列表才会重新计算。

这里的魔法在于，只要todos或filter没有变化，filteredTodos始终会是同一个对象引用。这对于优化性能特别重要，尤其是在将这个列表传递给子组件时。

总结

好了，伙计们！我们已经穿越了useMemo的土地，从理解其基本概念到看到它在现实世界中的实际应用。记住，useMemo就像你的忠实侧写，总是在那里帮助你通过避免不必要的计算来优化你的React应用。

以下是我们讨论过的方法的快速参考表：

方法	目的	语法
useMemo	缓存昂贵的计算	useMemo(() => computation, dependencies)

和编程中的任何工具一样，明智地使用useMemo。它对于优化性能非常好，但过度使用它实际上会使代码变得更加复杂，而不会带来显著的好处。就像我经常对我的学生说的，“能力越大，责任越大！”

继续练习，继续构建，最重要的是，继续在React中享受乐趣。在你意识到之前，你将创造出即使是经验丰富的开发者也会说“哇！”的惊人应用。记住，如果你感到困惑，只需想象你在向一只橡皮鸭解释你的代码。这很管用，相信我！

快乐的编码，未来的React大师们！

Credits: Image by storyset