明白ReactHooks的CaptureValue特征

由于刚运用 React hooks 不久，对它的性情还拿捏不准，掉了很屡次“坑”；这里的 “坑” 的意义并不是说 React hooks 的设想有题目，而是我在运用的时候，由于还没有跟上它的理念致使的一些题目。

在读了一些文章后，大抵是找到本身老是掉坑的缘由了 —— 没明白 React Hooks 中的 Capture Value 特征。

本文就以简朴的示例来诠释这个特征所发生的征象，对明白 Capture Value 特征做一个补充。

参考文章

• Using the Effect Hook : 官方的 useEffect 运用教程，用例详确 ，附 useEffect &＃8211; API文档
• 精读《useEffect 完整指南》：假如你想用好 Function Component 或许 Hooks，这篇文章险些是必读的，由于没有人能猜到什么是 Capture Value，但是不能明白这个观点，Function Component 也不能用的随手。
• 精读《Function VS Class 组件》 ：今后在 React 中常常运用 Class 的写法，在 React Hooks 须要转换成函数式编程作风，这篇文章对比了两种写法上的差别；（这两种写法没有优劣之分，机能差异也险些能够疏忽，而且 React 会历久支撑这两种写法）

1、状况值为何不是最新的？

• 官方相干 issue：Why am I seeing stale props or state inside my function?

“这个 effects 取的值怎样不是最新的？！”这个迷惑能够说是在运用 React Hooks 时常常碰到的疑问。

在以下代码中，当你点击按钮 3s 后，alert 显现的数值倒是 3s 前的 count 变量 —— 即没法猎取最新的值，猎取的值是过去某个时候的：

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
function Example() {
const [count, setCount] = useState(0);
const handleAlertClick = useCallback(()=>{
setTimeout(() => {
alert('You clicked on: ' + count);
}, 3000)
}, [count]);
return (


示例代码：
https://codesandbox.io/s/k5pm&＃8230;

详细操纵步骤：

• 当我们先点击 显现 按钮，在 3s 后（模仿耗时使命）会涌现弹层
• 在这 3s 时期疾速点击 增添 count 按钮
• 3s 后看到的弹层计数依旧为 0.

2、诠释

这是官方特地设置的机制，官方原文是：This prevents bugs caused by the code assuming props and state don’t change；（强行翻译一下，也许意义是：防备因 React 以为 props 或许 state 没有变动而引发的 bug）

为了明白官方这么设定的企图，将上面代码轻微修正一下：

• 去掉 显现 count 按钮
• 增添一个 削减 count 的按钮
• 运用 useEffect 替代 useCallback，让每次变动 count 都邑弹窗

...
useEffect(()=>{
setTimeout(() => {
alert('count: ' + count);
}, 3000)
}, [count]);
return (


我们先点击一次 增添 count，然后再紧接着点击一次 削减 count：

• 假如不是根据官方的机制设置，那末我们看到的两次弹层显现的 count 数值都是 0 —— 很明显这不是我们想要的
• 还好实际情况不是如许，会先显现 1，然后显现 0

总结起来，这个征象实在就是文章 精读《useEffect 完整指南》 所说起的 Capture Value 特征（能够自行前去原文相识更多细节）

3、扩大：怎样猎取马上的 count 变量

回到本来的题目，顽强如我，我就是想要在 3s 后猎取的是此时此刻的 count 变量，而不是我 3s 前点击时的 count 值，该怎样操纵？

官方给出的处理方案是，每次转变 count 的时候，将其放在 ref 范例的变量里即可。

修正一下本来的代码：

const countRef = useRef(null);
const handleAlertClick = useCallback(
() => {
setTimeout(() => {
alert("You clicked on: " + countRef.current);
}, 3000);
},
[count]
);
return (


变动事后的代码运转后，3s 后 alert 显现的 count 变量就是你页面上所见到的模样了：

ref 范例的变量通常是用来存储 DOM 元素援用，但在 react hooks 中，它能够寄存任何可变数据，就比如类实例属性一样，详细参考
Is there something like instance variables?

这等操纵，实在就是借助 ref 范例变量绕过 Capture Value 特征来到达目标。

4、总结

征引文章 精读《useEffect 完整指南》 中对 Capture Value 观点的诠释：每次 Render 的内容都邑构成一个快照并保存下来，因而当状况变动而 Rerender 时，就构成了 N 个 Render 状况，而每一个 Render 状况都具有本身牢固稳定的 Props 与 State。

经由过程这个示例，置信会比较轻易地明白 Capture Value 特征，并怎样运用 ref 来临时绕过它。在晓得并明白这个特征后，有助于进一步熟习了 React Hooks 的运转机制，削减掉坑的次数。

这里排列几篇文章，轻易自检是不是控制了这个观点：

• 经由过程 React Hooks 声明式地运用 setInterval：文章采纳循规蹈矩的示例来诠释题目。探究怎样让 setInterval 和 Hooks 调和地游玩，为何是这类体式格局，以及这类体式格局给你带来了什么新才能。
• How to get the previous props or state?: 怎样猎取变动前的 props 和 state ？官网供应的 useRef 来处理，也有人针对它进行了封装（How to compare oldValues and newValues on React Hooks useEffect?）

下面的是我的民众号二维码图片，迎接关注。