日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

本文已經過原作者 Shadeed 授權翻譯。

我們提供的服務有：做網站、成都網站建設、微信公眾號開發(fā)、網站優(yōu)化、網站認證、東烏珠穆沁ssl等。為近1000家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的東烏珠穆沁網站制作公司

Hooks 簡化了 React 組件內部狀態(tài)和副作用的管理。此外，可以將重復的邏輯提取到自定義 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狀態(tài)變量實際上已經增加了幾次。

為什么會這樣?

第一次渲染時，狀態(tài)變量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