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 了。5 d1 Y- l1 a( s3 e* z% K, [
log()是一个过时的闭包。闭包 log()捕获了值为 "Current value is 0"的 message 变量。即使 value 变量在调用increment()时被增加多次,message变量也不会更新,并且总是保持一个过时的值 "Current value is 0"。过时的闭包捕获具有过时值的变量。 2 q# z e( D+ T% O7 ~2.修复过时的闭包 + H1 `$ I; ]8 m) [* u P b 修复过时的log()问题需要关闭实际更改的变量:value的闭包。我们将语句 const message = ...; 移动到 log() 函数内部: 6 O+ ]1 V7 ?+ ] Q: ^, P8 G
打开事例(https://codesandbox.io/s/stale-closure-use-effect-broken-2-gyhzk)并点击几次增加按钮。然后看看控制台,每2秒出现一次Count is: 0,尽管count状态变量实际上已经增加了几次。 $ A Q- ~9 B' ~3 t/ y ! k# B, y f' V8 z 为什么会这样?第一次渲染时,状态变量count初始化为0。组件安装后,useEffect()调用 setInterval(log, 2000)计时器函数,该计时器函数计划每2秒调用一次log()函数。在这里,闭包log()捕获到count变量为0。% S% R6 Y, j. g9 C' }' e
之后,即使在单击Increase按钮时count增加,计时器函数每2秒调用一次的log(),使用count的值仍然是0。log()成为一个过时的闭包。 : V( Y* {" P! W" U p5 |4 V( T 解决方案是让useEffect()知道闭包log()依赖于count,并在count改变时正确处理间隔的重置:# s+ y8 d% e8 U3 A, _, W