展开本页目录
开始前准备什么
- 下载本题完整练习包，区分待实现 starter 与作者完成 reference。
- 按README准备本题原生依赖；所有输入均为原创或明确标注的本地fixture。
- 本地练习不需要付费模型Key；真实模型调用未执行，MiniLM题另有明确实际推理说明。
- 准备十张图片
- 观察Effect资源
- 复现缺清理
- 补齐卸载清理
- 切换关闭预览
- 核对资源归零
- 区分计数与内存
下载本题完整练习工程
原创输入、待完成starter、作者reference及实际运行产物，依README本地准备依赖。
查看启动命令与执行边界
环境要求、具体操作、产物核对与未运行范围。
1. 准备十张图片
输入是十张原创几何PNG，使用浏览器File对象预览。每次切换图片都生成Object URL，并登记一个resize监听器，便于观察生命周期。
2. 观察Effect资源
在React useEffect中创建预览URL与监听器。创建动作和清理动作必须属于同一次Effect，不能用新回调去remove旧监听器。
本地启动与复现
text
cd reference
npm install
npm run build
python3 -m http.server 87873. 复现缺清理
先选择故意缺清理版本，连续切换十张后关闭预览。真实活动URL和监听器各留下10个，说明组件消失并不等于外部资源自动释放。
4. 补齐卸载清理
完整版本的Effect返回cleanup，执行URL.revokeObjectURL并移除同一个监听器。新图片切换前以及组件卸载时都会触发这份清理。
5. 切换关闭预览
重新加载页面清空故意泄漏样例，再切到完整版本并重复十次。观察预览期间只有当前资源，关闭后不残留之前图片的URL。
6. 核对资源归零
关闭预览后实际登记的URL数与监听器数都归零。保留缺陷与修复两份对照，别用“页面看起来没变慢”代替生命周期检查。
7. 区分计数与内存
这些数只审计本题显式跟踪的两类资源，不是堆内存、GPU或垃圾回收测量。下载React源码可继续扩充快速切换、空输入与解码失败场景，Cursor账号未运行。
怎样确认已经完成
- React原生Effect对照十张图片，缺清理残留10个URL/监听器，完整清理关闭后两者为0；不是堆内存测量。
- 组件隐藏或卸载后，Object URL和外部监听器未必自动释放。本题故意缺cleanup后各留下10个资源。
- 完整Effect应返回cleanup，撤销当前URL并移除同一个回调。本题关闭预览后两项计数归零，但这不是整体堆内存测量。
常见问题
图片预览关了很多次，为什么页面越来越卡？
组件隐藏或卸载后，Object URL和外部监听器未必自动释放。本题故意缺cleanup后各留下10个资源。
React组件卸载了，监听器和Object URL真的释放了吗？
完整Effect应返回cleanup，撤销当前URL并移除同一个回调。本题关闭预览后两项计数归零，但这不是整体堆内存测量。
哪些部分实际运行，哪些需要独立验证？
React原生Effect对照十张图片，缺清理残留10个URL/监听器，完整清理关闭后两者为0；不是堆内存测量。 目标AI助手账号生成、云平台部署和生产环境不在本次执行范围。