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

本文已经过原作者 Shadeed 授权翻译。

我们提供的服务有：做网站、成都网站建设、微信公众号开发、网站优化、网站认证、东乌珠穆沁ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的东乌珠穆沁网站制作公司

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(); //  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 了。

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(); //  1
  
  
  
  
increment(); //  2
  
  
  
  
increment(); //  3
  
  
  
  
// Works!
  
  
  
  
log();       // "Current value is 3"
 
 
 
 

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

3. Hooks 中的过时闭包

3.1 useEffect()

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

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

 
 
 
 

  
  
  
  
function WatchCount() {
  
  
  
  
  const [count, setCount] = useState(0);
  
  
  
  

  
  
  
  
  useEffect(function() {
  
  
  
  
    setInterval(function log() {
  
  
  
  
      console.log(`Count is: ${count}`);
  
  
  
  
    }, 2000);
  
  
  
  
  }, []);
  
  
  
  

  
  
  
  
  return (
  
  
  
  
    
 {count}  setCount(count + 1) }> Increase  
  
  
  
  
  );
  
  
  
  
}
 
 
 
 

打开事例(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 (
  
  
  
  
    

  
  
  
  
 {count}
  
  
  
  
  setCount(count + 1) }>
  
  
  
  
 Increase