使用 React Hooks 时需要注意过时的闭包!

叁歲伎倆 2022-11-02 11:36 168阅读 0赞

> 作者：Shadeed  
> 译者：前端小智  
> 来源：dmitripavlutin

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

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

Hooks 严重依赖于 JS 闭包。这就是为什么 Hooks 如此具有表现力和简单，但是闭包有时很棘手。

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

让我们从过时的装饰开始。 然后，看看到过时的闭包如何影响 React Hooks，以及如何解决该问题。

### 1.过时的闭包 ###

工厂函数 `createIncrement(incBy)` 返回一个`increment`和`log`函数的元组。 调用时，`increment()`函数将内部`value`增加`incBy`，而`log()`仅打印一条消息，其中包含有关当前`value`的信息：

`[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()` 函数内部：

现在，在调用了 3 次 `increment()` 函数之后，调用 `log()` 记录了实际`value`：`"Current value is 3"`。

### 3. Hooks 中的过时闭包 ###

#### \#\#\# 3.1 *useEffect()* ####

我们来看一下使用`useEffect()` 过时闭包的常见情况。

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

打开事例（[https://codesandbox.io/s/stale-closure-use-effect-broken-2-gyhzk][https_codesandbox.io_s_stale-closure-use-effect-broken-2-gyhzk]）

并点击几次增加按钮。然后看看控制台，每2秒出现一次`Count is: 0`，尽管`count`状态变量实际上已经增加了几次。

![e92745d5d6a6ebee075f90c6968af3c2.png][]

为什么会这样？

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

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

之后，即使在单击`Increase`按钮时`count`增加，计时器函数每2秒调用一次的`log()`，使用`count`的值仍然是`0`。`log()`成为一个过时的闭包。

解决方案是让`useEffect()`知道闭包`log()`依赖于`count`，并在`count`改变时正确处理间隔的重置

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

#### 3.2 useState() ####

`<DelayedCount>`组件有1个`button` ，以1秒延迟异步增加计数器。

现在打开演示(https://codesandbox.io/s/use-state-broken-0q994)。 快速单击2次按钮。 计数器仅更新为`1`，而不是预期的`2`。

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

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

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

为了解决这个问题，我们使用函数式方法s`etCount(count => count + 1)`来更新`count`状态

打开演示(https://codesandbox.io/s/use-state-fixed-zz78r)。 再次快速单击按钮`2`次。 计数器显示正确的值`2`。

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

setCount(alwaysActualStateValue => newStateValue);

这就是为什么在状态更新过程中出现的过时装饰问题可以通过函数这种方式来解决。

### 4.总结 ###

当闭包捕获过时的变量时，就会发生过时的闭包问题。

解决过时闭包的有效方法是正确设置React钩子的依赖项。或者，在失效状态的情况下，使用函数方式更新状态。

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

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://dmitripavlutin.com/react-hooks-stale-closures/

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[https_codesandbox.io_s_stale-closure-use-effect-broken-2-gyhzk]: https://codesandbox.io/s/stale-closure-use-effect-broken-2-gyhzk
[e92745d5d6a6ebee075f90c6968af3c2.png]: /images/20221024/31e2b8a296664f13aaa31b5650e59c2e.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi