各位听众，把手里的咖啡放下，把那个正在闪烁的光标移到屏幕中央。欢迎来到今天的讲座。我是你们的向导，今天我们要探讨的主题是——React Forget：一场关于“记忆”与“遗忘”的叛乱。
如果你是一名 React 开发者，哪怕你只写过一行代码，你一定听说过“渲染”。如果你写过超过一百行，你一定听说过 useMemo、useCallback 和 React.memo。
这三个词，就像是悬在每一个 React 开发者头顶的达摩克利斯之剑。它们是我们为了性能而编写的“咒语”，是我们试图告诉 React：“嘿，别动！除非必须，否则别重新渲染这个组件！”
但是，朋友们，这把剑太重了。太累了。我们每天都在给 React 写“记忆代码”。我们小心翼翼地把函数包在 useCallback 里，把计算结果包在 useMemo 里，生怕 React 一不小心就把我们的昂贵的计算给丢弃了，或者把我们的函数引用给改了。
React 团队看着我们这么累，看着我们在依赖项数组里填满了数字、字符串和布尔值，看着我们为了一个简单的列表渲染写上一百行“优化”代码，他们决定：够了。
于是，React 19 带来了一个名为 React Forget 的编译器。它不是一个新的 Hook，不是一个新的库，它是一个编译器。它就像是一个不知疲倦的实习生，或者更准确地说，它就像是一个拥有预知能力的读心术大师。
今天，我们就来深扒这个革命性的东西，看看它如何终结“手动优化”的苦日子。
第一章：手动 Memoization 的“黑暗时代”
在 React Forget 出现之前，我们是怎么写的？
假设你有一个父组件 UserProfile，里面有一个昂贵的计算函数 calculateExpensiveData。这个函数每秒钟能算出 100 万个数据点，或者更糟糕，它包含了一个复杂的数学公式。
为了不让父组件每次渲染都重新计算这个数据，我们把它包在 useMemo 里。
// 旧时代：手动 Memoization
import { useMemo } from 'react';
function UserProfile({ userId }) {
// 我们告诉 React：“嘿，只有当 userId 变了，你再算这个数据。”
const expensiveData = useMemo(() => {
console.log('计算中... 这是一个昂贵的操作');
return userId * 1000; // 模拟昂贵计算
}, [userId]); // 依赖项数组：这是我们的生命线，也是我们的噩梦。
return (
<div>
<h1>用户 ID: {userId}</h1>
<p>计算结果: {expensiveData}</p>
</div>
);
}看起来不错，对吧？只要 userId 不变，我们就不重新计算。
但是，生活不是线性的。生活充满了 Bug。
1.1 记忆化陷阱
有一天，你想在这个组件里加一个功能：显示用户的年龄。你发现 calculateExpensiveData 似乎不包含年龄信息，于是你修改了函数：
const expensiveData = useMemo(() => {
console.log('计算中... 包含年龄了');
return {
value: userId * 1000,
age: 25 // 新增的数据
};
}, [userId]);完美！你刷新了页面。但是，当你点击一个按钮改变 userId 时，神奇的事情发生了——年龄消失了。
为什么？因为你的 useMemo 依赖项数组里只有 [userId]。React 认为只要你没动 userId，函数就不需要重新执行。于是，它直接把上一次的缓存结果（那个没有 age 的对象）返回给了你。
这就是手动 Memoization 的第一宗罪：你很容易忘记更新依赖项数组。
1.2 传递回调地狱
再来看看 useCallback。你有一个父组件传递给子组件一个点击处理函数。
function Parent() {
const [count, setCount] = useState(0);
// 为了防止子组件每次都重新渲染，我们用 useCallback
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []); // 依赖项数组是空的！
return (
<div>
<button onClick={handleClick}>点击我</button>
<ChildComponent onClick={handleClick} />
</div>
);
}这看起来没问题。但是，如果 handleClick 里面依赖了父组件的某个状态呢？比如 handleClick 需要知道 count 是多少才能决定怎么点？
const handleClick = useCallback(() => {
// 哎呀，这里用到了 count
console.log(count);
setCount(c => c + 1);
}, [count]); // 你必须把 count 加进去。一旦你把 count 加进去，每次 count 变，handleClick 的引用就会变。子组件就会重新渲染。
你为了优化父组件，结果导致子组件频繁渲染。你陷入了死循环。
这就是手动 Memoization 的第二宗罪：维护成本过高，心智负担过重。
1.3 React.memo 的尴尬
对于子组件，我们通常用 React.memo 来包裹。这就像给组件穿了一层防弹衣。
const ChildComponent = React.memo(({ data }) => {
console.log('子组件渲染了');
return <div>{JSON.stringify(data)}</div>;
});这看起来很美。但是，如果父组件传递的 data 对象每次都是新的引用（比如每次渲染都 new 一个对象），那么 React.memo 就会失效。
于是，我们又得用 useMemo 在父组件里把这个对象“冻结”住。这简直是一场绕口令大赛。
第二章：React Forget 的登场
React 团队看着这些满屏的 useMemo、useCallback 和 React.memo，就像看着一个满身纹身、背着吉他、在地铁里吃沙丁鱼的朋克青年。他们想：“能不能让这个朋克青年穿上西装，坐在办公室里写代码？”
于是，React Forget 诞生了。
React Forget 是一个编译器。 它不是运行时的库，它是构建时的工具。它在打包你的代码之前，会先“阅读”你的代码，理解你的意图，然后自动帮你插入 useMemo 和 useCallback。
它的工作原理非常优雅，可以用一句话概括：它通过追踪引用来决定是否重新渲染。
2.1 核心概念：引用追踪
React Forget 的核心魔法叫做 引用追踪。
在 React 中，组件的渲染是基于 props 和 state 的。如果 props 和 state 没变，React 就不重新渲染。
但是，在手动 Memoization 中，我们经常遇到一个问题：即使 props 没变，我们传递的函数引用却变了。
React Forget 解决了这个问题的方法是：它观察你的代码。
它看到你定义了一个函数 handleClick。它看到这个函数里面引用了 state。它就会自动在这个函数外面套上一层 useCallback，并把相关的 state 作为依赖项。
它看到你定义了一个计算 const expensiveData = state * 2。它看到这个计算依赖于 state。它就会自动套上一层 useMemo。
最神奇的是什么？它不需要你告诉它。
你不需要写 [state]。你不需要写 [userId]。你不需要写 React.memo。你只需要写正常的 React 代码。
第三章：代码演示——从混乱到整洁
让我们来看看，同样的逻辑，用 React Forget 写出来是什么样子的。
场景：一个复杂的购物车
假设我们有一个购物车组件，里面有一个商品列表。我们需要对商品进行过滤，并且点击商品可以选中它。我们还有一个“计算总价”的函数。
1. 旧时代：手动优化
import React, { useState, useMemo, useCallback } from 'react';
// 商品列表子组件
const ProductList = React.memo(({ products, onToggle }) => {
console.log('ProductList 渲染了'); // 只有当 props 变化时才打印
return (
<ul>
{products.map(p => (
<li key={p.id} onClick={() => onToggle(p.id)}>
{p.name} - {p.price}
</li>
))}
</ul>
);
});
// 购物车主组件
const ShoppingCart = () => {
const = useState([
{ id: 1, name: '键盘', price: 100 },
{ id: 2, name: '鼠标', price: 50 },
{ id: 3, name: '显示器', price: 300 },
]);
const [selectedIds, setSelectedIds] = useState(new Set());
// 手动过滤
const visibleProducts = useMemo(() => {
return products.filter(p => !selectedIds.has(p.id));
}, );
// 手动计算总价
const totalPrice = useMemo(() => {
return visibleProducts.reduce((sum, p) => sum + p.price, 0);
}, [visibleProducts]);
// 手动创建点击处理函数
const handleToggle = useCallback((id) => {
setSelectedIds(prev => {
const next = new Set(prev);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
});
}, []);
return (
<div>
<h2>购物车</h2>
<div>总价: {totalPrice}</div>
<ProductList
products={visibleProducts}
onToggle={handleToggle}
/>
</div>
);
};看这段代码，是不是觉得有点啰嗦？useMemo、useCallback、React.memo。每一个都像是一个必须履行的仪式。
2. 新时代：React Forget
现在，让我们把 useMemo、useCallback 和 React.memo 全部删掉。
import { useState } from 'react';
// 我们甚至不需要 React.memo 了！
// React Forget 会自动处理这个组件的渲染优化。
const ProductList = ({ products, onToggle }) => {
// Forget 会自动在这里插入 useMemo
return (
<ul>
{products.map(p => (
<li key={p.id} onClick={() => onToggle(p.id)}>
{p.name} - {p.price}
</li>
))}
</ul>
);
};
const ShoppingCart = () => {
const = useState([
{ id: 1, name: '键盘', price: 100 },
{ id: 2, name: '鼠标', price: 50 },
{ id: 3, name: '显示器', price: 300 },
]);
const [selectedIds, setSelectedIds] = useState(new Set());
// 忘记在这里自动插入 useMemo
const visibleProducts = products.filter(p => !selectedIds.has(p.id));
// 忘记在这里自动插入 useMemo
const totalPrice = visibleProducts.reduce((sum, p) => sum + p.price, 0);
// 忘记在这里自动插入 useCallback
const handleToggle = (id) => {
setSelectedIds(prev => {
const next = new Set(prev);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
});
};
return (
<div>
<h2>购物车</h2>
<div>总价: {totalPrice}</div>
{/* 忘记会自动处理这个组件的 memoization */}
<ProductList
products={visibleProducts}
onToggle={handleToggle}
/>
</div>
);
};看！代码变干净了。可读性提高了。逻辑更清晰了。而且，性能和之前一模一样。
React Forget 懂得 handleToggle 依赖了 selectedIds，所以它会在内部帮你记住这个函数的引用，只有当 selectedIds 变化时，它才会重新创建函数。它也懂得 visibleProducts 依赖了 products 和 selectedIds。
它就像一个拥有 AI 视觉的代码阅读器，一眼就看穿了你的意图。
第四章：React Forget 是如何做到的？（深度解析）
既然大家这么感兴趣，我就得稍微深入一点，讲讲这个编译器到底在脑子里转了些什么。这可是黑科技。
4.1 引用相等性
React Forget 的所有魔法都建立在 React 的一个核心概念上：引用相等性。
如果你在 JS 里写 a === b，React 会比较它们的内存地址。如果地址一样，它们就是同一个东西。
React Forget 的目标就是确保：当 props 和 state 没变时，传递给子组件的 props 引用也不会变。
4.2 快照
当你调用一个函数时，React 会创建一个“快照”。这个快照包含了当前所有的 state 和 props。
React Forget 会分析这个快照。它会问自己：“在这个快照里，这个函数 handleClick 里用到了哪些变量？”
-
如果它用到了
state.count，那么 React Forget 就会告诉 React：“嘿，当count变化时，请重新创建handleClick函数。当count不变时，请复用上一次的函数。” -
如果它没用任何变量，那它就是一个纯函数。React Forget 会告诉 React：“这个函数是纯函数，永远不需要重新创建，直接复用上一次的引用。”
4.3 抽象逃逸
这是一个非常高级的概念。
假设你有一个 utils.js 文件，里面有一个纯函数 multiply(a, b)。
// utils.js
export function multiply(a, b) {
return a * b;
}在你的组件里：
function Component() {
const a = 2;
const b = 3;
const result = multiply(a, b);
return <div>{result}</div>;
}React Forget 会怎么处理？
如果你手动写 useMemo，你需要把 multiply 包进去。
但 React Forget 会进行抽象逃逸分析。它发现 multiply 是一个纯函数，而且它在 utils.js 里定义。这意味着，只要 a 和 b 不变，result 就不会变。
但是，如果 multiply 是你在组件里定义的，React Forget 会追踪它。
如果 multiply 是在组件外部定义的，React Forget 会认为它是一个稳定的引用。
这就像是在说：“我知道这个函数是纯的，所以我不需要每次都重新计算它，我只需要看看我的输入有没有变。”
4.4 状态重置
这是 React Forget 最厉害的地方之一。
假设你有一个表单组件。你有一个 resetForm 函数。
function Form() {
const [formData, setFormData] = useState({ name: '', email: '' });
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = () => {
alert(JSON.stringify(formData));
};
const resetForm = () => {
setFormData({ name: '', email: '' });
};
return (
<form onSubmit={handleSubmit}>
<input name="name" value={formData.name} onChange={handleChange} />
<button type="button" onClick={resetForm}>重置</button>
</form>
);
}如果你手动写 useCallback，你会遇到大麻烦。handleChange 依赖 formData，所以每次输入都会导致 handleChange 重新创建，导致表单输入卡顿。
但 React Forget 会怎么处理？
它会分析 handleChange。它发现 handleChange 依赖 formData。所以，每次 formData 变化，handleChange 都会重新创建。
等等，这不还是会导致卡顿吗？
是的，对于 handleChange 这种频繁更新的函数，React Forget 通常不会自动优化它。因为频繁创建函数的开销，可能比每次渲染都重新绑定事件监听器的开销还要大。
但是，对于 handleSubmit 和 resetForm 这种不频繁调用的函数，React Forget 会自动优化它们。
当你在 handleSubmit 里读取 formData 时，React Forget 会记住那一刻的 formData 快照。即使后续 formData 发生了变化，handleSubmit 依然持有旧的快照。
这就像是给 handleSubmit 里的 formData 打了一个“时间冻结”标签。
第五章：何时需要手动优化？（避坑指南）
虽然 React Forget 很强大，但它不是神。它不是万能的。如果你过度依赖它，或者对它的规则理解不到位，你还是会掉进坑里。
5.1 副作用
React Forget 专注于渲染优化。它不关心副作用。
如果你在组件里使用了 useEffect，你需要手动管理依赖项数组。
useEffect(() => {
document.title = `Count is ${count}`;
}, [count]); // 这个必须手动写React Forget 不会帮你写这个。因为副作用是“可观察的行为”，而 React Forget 是基于“代码逻辑”的。
5.2 修改状态
React Forget 假设你的函数是纯函数。如果你在函数里修改了状态，React Forget 就会罢工。
function BadComponent() {
const [count, setCount] = useState(0);
// React Forget 会认为这个函数是稳定的
// 因为它不依赖任何 props 或 state
const increment = () => {
setCount(c => c + 1);
};
return <button onClick={increment}>{count}</button>;
}在这个例子里，React Forget 不会自动优化 increment，因为它会检测到你在里面修改了 state。它会自动插入 useCallback，依赖项是 [setCount]。
但是，如果你在 increment 里面引用了其他的 state，比如 const [name, setName] = useState('Bob')，那么 increment 就依赖 name。
如果你忘了在依赖项数组里写 name，手动 Memoization 就会报错。
而 React Forget 会自动把 name 加入依赖项。它不会让你漏掉它。
5.3 需要重置的缓存
有时候，我们需要在组件卸载或重新挂载时重置某些数据。
function ExpensiveCalc() {
const [count, setCount] = useState(0);
// 手动写的话，你很难在组件卸载时重置这个缓存
const data = useMemo(() => {
return heavyComputation(count);
}, [count]);
return (
<div>
<button onClick={() => setCount(c => c + 1)}>增加</button>
<div>{JSON.stringify(data)}</div>
</div>
);
}React Forget 会自动优化这个。但是，如果你想在组件卸载时重置 data，你需要手动处理。
5.4 避免过度优化
不要试图把所有东西都包在 useMemo 里。React Forget 会帮你做这件事。如果你手动做了，而且做得不对，反而会干扰它的判断。
如果你的计算非常快，不需要优化，就不要优化。
第六章：React Forget 的未来
React Forget 的出现，标志着 React 开发模式的一个重大转变。
以前，我们写 React 代码，就像是在走钢丝。我们要时刻警惕着性能问题，时刻担心着重新渲染。我们要把代码写得像数学公式一样严谨，每一个依赖项都不能少。
现在，React Forget 允许我们写“人类代码”。我们写代码，就像是在讲故事，就像是在表达意图。
我们不需要告诉 React：“嘿，这个函数是纯的，别动它。”
我们只需要说：“这就是这个函数的作用。”
React Forget 会替我们做剩下的工作。
6.1 React 19 的变化
在 React 19 中，useMemo 和 useCallback 并没有被废弃。它们依然存在。但是，它们变成了可选的。
如果你不写它们，React Forget 会自动帮你做。
如果你写了它们，React Forget 会尊重你的选择。它会尝试编译你的代码，但如果它发现你的手动优化阻碍了它的优化（比如你手动写了依赖项数组但写错了），它会给你一个警告。
6.2 编译器优先
React 团队正在大力推动“编译器优先”的开发模式。
这意味着，React 的 API 设计越来越倾向于让编译器来处理细节，而不是让开发者来处理细节。
以前，我们说 React 是“声明式”的。现在，我们说 React 是“声明式 + 编译器优化”的。
6.3 竞争对手
这不仅仅是 React 的独角戏。Svelte、SolidJS 等框架早就采用了类似的“自动优化”策略。
但是，React 的优势在于它的生态系统。React Forget 让 React 依然保持了 React 的灵活性，同时解决了它的性能痛点。
第七章：总结——拥抱遗忘
各位，让我们回顾一下。
我们曾经为了性能，把自己变成了代码的狱卒。我们用 useMemo、useCallback 和 React.memo 把代码层层包裹，生怕它跑错一步。
我们害怕依赖项数组，害怕忘记写 [dep]，害怕函数引用变化导致子组件重新渲染。
现在，React Forget 来了。它就像是一个宽容的朋友，它告诉你：“别担心，忘掉那些依赖项吧。忘掉那些手动优化的技巧吧。只要你的代码逻辑是对的，我就帮你把性能调到最优。”
它的工作原理并不神秘。它只是更聪明地理解了你的代码。它通过引用追踪和快照技术，自动决定何时更新，何时复用。
所以，从今天开始，请拥抱 React Forget。
当你看到满屏的 useMemo 时，不要觉得专业。当你看到手动的优化代码时，不要觉得自豪。
你应该觉得……那是旧时代的遗迹。
去写你的代码吧。去享受 React 的声明式之美。让编译器去处理那些繁琐的细节。去写更少，但更好的代码。
这，就是 React Forget 带给我们的革命。
谢谢大家。现在，请大家把那个 useMemo 删了吧。相信我，React 会感谢你的。