关于javascript:使用-React-Hooks-时需要注意过时的闭包

作者：Shadeed
译者：前端小智
起源：dmitripavlutin

点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

Hooks 简化了 React 组件外部状态和副作用的治理。此外，能够将反复的逻辑提取到自定义 Hooks 中，以在整个应用程序中重复使用。

Hooks 重大依赖于 JS 闭包。这就是为什么 Hooks 如此具备表现力和简略，然而闭包有时很辣手。

应用 Hooks 时可能遇到的一个问题就是过期的闭包，这可能很难解决。

让咱们从过期的装璜开始。而后，看看到过期的闭包如何影响 React Hooks，以及如何解决该问题。

1.过期的闭包

工厂函数 createIncrement(incBy) 返回一个increment和log函数的元组。调用时，increment()函数将外部value减少incBy，而log()仅打印一条音讯，其中蕴含无关以后value的信息：

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(); //  1increment(); //  2increment(); //  3// 不能正确工作！log();       //  "Current value is 0"

[increment, log] = createIncrement(1)返回一个函数元组:一个函数减少外部值，另一个函数记录以后值。

而后，increment()的3次调用将 value递增到3。

最初，log()调用打印消息是 Current value is 0，这有点出其不意的，因为此时 value 为 3 了。

log()是一个过期的闭包。闭包 log()捕捉了值为 "Current value is 0"的 message 变量。

即便 value 变量在调用increment()时被减少屡次，message变量也不会更新，并且总是放弃一个过期的值 "Current value is 0"。

过期的闭包捕捉具备过时值的变量。

2.修复过期的闭包

修复过期的log()问题须要敞开理论更改的变量:value的闭包。

咱们将语句 const message = ...; 挪动到 log() 函数外部：

function createIncrement(incBy) {  let value = 0;  function increment() {    value += incBy;    console.log(value);  }  function log() { const message = `Current value is ${value}`;    console.log(message);  }    return [increment, log];}const [increment, log] = createIncrement(1);increment(); //  1increment(); //  2increment(); //  3// Works!log();       // "Current value is 3"

当初，在调用了 3 次 increment() 函数之后，调用 log() 记录了理论value："Current value is 3"。

3. Hooks 中的过期闭包

3.1 useEffect()

咱们来看一下应用useEffect() 过期闭包的常见状况。

在组件<WatchCount>中，useEffect() 中每2秒记录一次count的值

function WatchCount() {  const [count, setCount] = useState(0);  useEffect(function() {    setInterval(function log() {      console.log(`Count is: ${count}`);    }, 2000);  }, []);  return (    <div> {count} <button onClick={() => setCount(count + 1) }> Increase </button> </div>  );}

关上事例（https://codesandbox.io/s/stale-closure-use-effect-broken-2-gyhzk）

并点击几次减少按钮。而后看看控制台，每2秒呈现一次Count is: 0，只管count状态变量实际上曾经减少了几次。

为什么会这样？

第一次渲染时，状态变量count初始化为0。

组件装置后，useEffect()调用 setInterval(log, 2000)计时器函数，该计时器函数打算每2秒调用一次log()函数。在这里，闭包log()捕捉到count变量为0。

之后，即便在单击Increase按钮时count减少，计时器函数每2秒调用一次的log()，应用count的值依然是0。log()成为一个过期的闭包。

解决方案是让useEffect()晓得闭包log()依赖于count，并在count扭转时正确处理距离的重置

function WatchCount() {  const [count, setCount] = useState(0);  useEffect(function() {    const id = setInterval(function log() {      console.log(`Count is: ${count}`);    }, 2000);    return function() {      clearInterval(id);    } }, [count]);  return (    <div> {count} <button onClick={() => setCount(count + 1) }> Increase </button> </div>  );}

正确设置依赖项后，一旦count发生变化，useEffect()就会更新闭包。

3.2 useState()

<DelayedCount>组件有1个button ，以1秒提早异步减少计数器。

function DelayedCount() {  const [count, setCount] = useState(0);  function handleClickAsync() {    setTimeout(function delay() {      setCount(count + 1);    }, 1000);  }  return (    <div> {count} <button onClick={handleClickAsync}>Increase async</button> </div>  );}

当初关上演示(https://codesandbox.io/s/use-...。疾速单击2次按钮。计数器仅更新为1，而不是预期的2。

每次单击setTimeout(delay, 1000)将在1秒后执行delay()。delay()此时捕捉到的 count 为 0。

两个delay()都将状态更新为雷同的值:setCount(count + 1) = setCount(0 + 1) = setCount(1)。

这是因为第二次单击的delay()闭包中已捕捉了过期的count变量为0。

为了解决这个问题，咱们应用函数式办法setCount(count => count + 1)来更新count状态

function DelayedCount() {  const [count, setCount] = useState(0);  function handleClickAsync() {    setTimeout(function delay() { setCount(count => count + 1);    }, 1000);  }  function handleClickSync() {    setCount(count + 1);  }  return (    <div> {count} <button onClick={handleClickAsync}>Increase async</button> <button onClick={handleClickSync}>Increase sync</button> </div>  );}

关上演示(https://codesandbox.io/s/use-...。再次疾速单击按钮2次。计数器显示正确的值2。

当一个返回基于前一个状态的新状态的回调函数被提供给状态更新函数时，React确保将最新的状态值作为该回调函数的参数提供

setCount(alwaysActualStateValue => newStateValue);

这就是为什么在状态更新过程中呈现的过期装璜问题能够通过函数这种形式来解决。

4.总结

当闭包捕捉过期的变量时，就会产生过期的闭包问题。

解决过期闭包的无效办法是正确设置React钩子的依赖项。或者，在生效状态的状况下，应用函数形式更新状态。

~完，我是小智，我要去刷碗了。

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://dmitripavlutin.com/re...

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。