function createIncrement(incBy) {
let value = 0;
function increment() {
value += incBy;
console.log(value);
}
const message = `Current value is ${value}`; function log() { console.log(message); }
return [increment, log];
}
const [increment, log] = createIncrement(1);
increment(); // 1
increment(); // 2
increment(); // 3
// 不能正确工作!
log(); // "Current value is 0"
[increment, log] = createIncrement(1)返回一个函数元组:一个函数增加内部值,另一个函数记录当前值。然后,increment()的3次调用将 value递增到3。最后,log()调用打印消息是 Current value is 0,这有点出乎意料的,因为此时 value 为 3 了。. G7 b) B. K4 P
log()是一个过时的闭包。闭包 log()捕获了值为 "Current value is 0"的 message 变量。即使 value 变量在调用increment()时被增加多次,message变量也不会更新,并且总是保持一个过时的值 "Current value is 0"。过时的闭包捕获具有过时值的变量。. ~6 ^- U/ u) i& [: e" J/ { 2.修复过时的闭包 8 M$ y( M* M. U. g/ r! v4 e 修复过时的log()问题需要关闭实际更改的变量:value的闭包。我们将语句 const message = ...; 移动到 log() 函数内部: 9 x1 I% q T; Q* V6 P
打开事例(https://codesandbox.io/s/stale-closure-use-effect-broken-2-gyhzk)并点击几次增加按钮。然后看看控制台,每2秒出现一次Count is: 0,尽管count状态变量实际上已经增加了几次。& r8 Q& S; M8 l8 J$ Z9 B1 D& R2 P
4 d) D7 g! N5 e
为什么会这样?第一次渲染时,状态变量count初始化为0。组件安装后,useEffect()调用 setInterval(log, 2000)计时器函数,该计时器函数计划每2秒调用一次log()函数。在这里,闭包log()捕获到count变量为0。 : f2 s o# ?! p" Y N& y, l 之后,即使在单击Increase按钮时count增加,计时器函数每2秒调用一次的log(),使用count的值仍然是0。log()成为一个过时的闭包。$ N# O9 R& U k, h+ S* p
解决方案是让useEffect()知道闭包log()依赖于count,并在count改变时正确处理间隔的重置:" m" }5 C! o+ N. Z- d6 ], F4 M( V