React 开发中如何避免闭包陷阱？不过，

你正在开发一个文档编辑器。产品要求每秒自动保存一次草稿，以防使用者意外关闭页面丢失内容。于是你写出了这样的代码：

function DocumentEditor {
const = useState;useEffect => {
const timer = setInterval => {
saveDraft;// content 始终是 ''
},1000);return => clearInterval;},)，不过，return  setContent} />;}

测试时会发现一个诡异的现象在编辑器中输入大段文字后定时保存到后端的内容永远是空字符串。说起来，明明 content 在 state 中已经更新了为什么 saveDraft 拿到的总是初始值？

排查半天后才发现真相罪魁祸首只有一个——闭包陷阱。

根本原因的观点是，过期闭包固化了旧值

useEffect 的依赖数组为空 代表着副作用只在组件挂载时执行一次。那个定时器回调在创建时就把当时的 content捕获进了闭包。之后无论 state 怎么更新，定时器里的 content永远是那个“过期”的值。

说到更多场景，逐一击破过期闭包问题

从场景1来看。倒计时卡住不动 —— 定时器中的过期state值

使用者痛点：倒计时从60秒跳到59秒后就卡住不动！ 者却花费几小时才发现问题！

function PaymentTimer {
const = useState;// 初始60秒
useEffect => {
const timer = setInterval => {
if {
clearInterval;handleTimeout;} else {
setTimeLeft;// 永远从初始值减1
}
},1000);怎么说呢，return => clearInterval;},)，// 错误：空依赖数组
}

现象分析：定时器回调捕获了初始state值，之后所有操作都是基于这个固化值进行计算！不过，表面上时间持续变化，实际内部逻辑一直在做60-1=59的运算！

场景2这方面，表单提交永远发送初始数据 —— useCallback依赖缺失问题

使用者痛点：表单填写完成提交后后端收到的却是空数据！老实说，而开发者却毫不知情！直到QA同学报告bug...

function Parent {
const = useState;// 错误依赖数组导致formData被捕获为初始值
const handleSubmit = useCallback => {
submitForm;// 永远提交{name:''}
},);}

至于场景3，账号切换后消息未刷新 —— 轮询中的过期props问题

现实案例：某电商网站账号切换功能上线后使用者反馈新账号登录但消息仍显示旧账号信息！前端工程师花费整晚才修复这个隐蔽bug...

function MessageBadge {
useEffect=>{//userId被固化为挂载时值！fetchUnreadMessages
},)
}
//修复方案：
const userIdRef=useRef
userIdRef.current=userId
useEffect=>{
fetchUnreadMessages
}。)

两个原则解决掉99%的React闭包问题

1. 需要看到最新状态但不想重建函数→使用useRef+ref.current=value 技巧穿透闭包
2. 新状态依赖旧状态且更新在闭包中 → 必须使用 函数式setState

需要基于当前状态更新并希望批量处理 tr>'