理解 React Hooks 的 Capture Value 特性

curlyCheng 發(fā)布于2019-08-26 13:38 / 2820人閱讀

摘要：在讀了一些文章后，大致是找到自己總是掉坑的原因了沒理解中的特性。通過這個(gè)示例，相信會(huì)比較容易地理解特性，并如何使用來暫時(shí)繞過它。在知道并理解這個(gè)特性后，有助于進(jìn)一步熟悉了的運(yùn)行機(jī)制，減少掉坑的次數(shù)。

由于剛使用 React hooks 不久，對(duì)它的脾氣還拿捏不準(zhǔn)，掉了很多次“坑”；這里的 “坑” 的意思并不是說 React hooks 的設(shè)計(jì)有問題，而是我在使用的時(shí)候，因?yàn)檫€沒有跟上它的理念導(dǎo)致的一些問題。

在讀了一些文章后，大致是找到自己總是掉坑的原因了 —— 沒理解 React Hooks 中的 Capture Value 特性。

本文就以簡(jiǎn)單的示例來解釋這個(gè)特性所產(chǎn)生的現(xiàn)象，對(duì)理解 Capture Value 特性做一個(gè)補(bǔ)充。

參考文章

Using the Effect Hook : 官方的 useEffect 使用教程，用例詳實(shí) ，附 useEffect - API文檔

精讀《useEffect 完全指南》：如果你想用好 Function Component 或者 Hooks，這篇文章幾乎是必讀的，因?yàn)闆]有人能猜到什么是 Capture Value，然而不能理解這個(gè)概念，F(xiàn)unction Component 也不能用的順手。

精讀《Function VS Class 組件》：以后在 React 中經(jīng)常使用 Class 的寫法，在 React Hooks 需要轉(zhuǎn)換成函數(shù)式編程風(fēng)格，這篇文章對(duì)比了兩種寫法上的差異；（這兩種寫法沒有好壞之分，性能差距也幾乎可以忽略，而且 React 會(huì)長期支持這兩種寫法）

1、狀態(tài)值為什么不是最新的？

官方相關(guān) issue：Why am I seeing stale props or state inside my function?

“這個(gè) effects 取的值怎么不是最新的？！”這個(gè)疑惑可以說是在使用 React Hooks 時(shí)經(jīng)常遇到的疑問。

在下列代碼中，當(dāng)你點(diǎn)擊按鈕 3s 后，alert 顯示的數(shù)值卻是 3s 前的 count 變量 —— 即無法獲取最新的值，獲取的值是過去某個(gè)時(shí)刻的：

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 (
     
       You clicked {count} times
       
       
     
   );
 }
 const rootElement = document.getElementById("root");
 ReactDOM.render(, rootElement);

示例代碼：https://codesandbox.io/s/k5pm...

具體操作步驟：

當(dāng)我們先點(diǎn)擊顯示按鈕，在 3s 后（模擬耗時(shí)任務(wù)）會(huì)出現(xiàn)彈層

在這 3s 期間快速點(diǎn)擊增加 count 按鈕

3s 后看到的彈層計(jì)數(shù)仍舊為 0.

2、解釋

這是官方特意設(shè)置的機(jī)制，官方原文是：This prevents bugs caused by the code assuming props and state don’t change；（強(qiáng)行翻譯一下，大概意思是：防止因 React 認(rèn)為 props 或者 state 沒有變更而引起的 bug）

為了理解官方這么設(shè)定的意圖，將上面代碼稍微修改一下：

去掉 顯示 count 按鈕

增加一個(gè) 減少 count 的按鈕

使用 useEffect 代替 useCallback，讓每次更改 count 都會(huì)彈窗

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

  return (
    
      You clicked {count} times
      
      
    
  );
}
...

我們先點(diǎn)擊一次 增加 count，然后再緊接著點(diǎn)擊一次 減少 count：

如果不是按照官方的機(jī)制設(shè)置，那么我們看到的兩次彈層顯示的 count 數(shù)值都是 0 —— 很明顯這不是我們想要的

還好實(shí)際情況不是這樣，會(huì)先顯示 1，然后顯示 0

總結(jié)起來，這個(gè)現(xiàn)象其實(shí)就是文章精讀《useEffect 完全指南》所提及的 Capture Value 特性（可以自行前往原文了解更多細(xì)節(jié)）

3、擴(kuò)展：如何獲取即刻的 count 變量

回到原來的問題，倔強(qiáng)如我，我就是想要在 3s 后獲取的是此時(shí)此刻的 count 變量，而不是我 3s 前點(diǎn)擊時(shí)的 count 值，該怎么操作？

官方給出的解決方案是，每次改變 count 的時(shí)候，將其放在 ref 類型的變量里即可。

修改一下原來的代碼：

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

  return (
    
      You clicked {count} times
      
      
    
  );

更改過后的代碼運(yùn)行后，3s 后 alert 顯示的 count 變量就是你頁面上所見到的樣子了：

ref 類型的變量通常是用來存儲(chǔ) DOM 元素引用，但在 react hooks 中，它可以存放任何可變數(shù)據(jù)，就好比類實(shí)例屬性一樣，具體參考 Is there something like instance variables?

這等操作，其實(shí)就是借助 ref 類型變量繞過 Capture Value 特性來達(dá)到目的。

4、總結(jié)

援引文章精讀《useEffect 完全指南》中對(duì) Capture Value 概念的解釋：每次 Render 的內(nèi)容都會(huì)形成一個(gè)快照并保留下來，因此當(dāng)狀態(tài)變更而 Rerender 時(shí)，就形成了 N 個(gè) Render 狀態(tài)，而每個(gè) Render 狀態(tài)都擁有自己固定不變的 Props 與 State。

通過這個(gè)示例，相信會(huì)比較容易地理解 Capture Value 特性，并如何使用 ref 來暫時(shí)繞過它。在知道并理解這個(gè)特性后，有助于進(jìn)一步熟悉了 React Hooks 的運(yùn)行機(jī)制，減少掉坑的次數(shù)。

這里羅列幾篇文章，方便自檢是否掌握了這個(gè)概念：

通過 React Hooks 聲明式地使用 setInterval：文章采用循序漸進(jìn)的示例來解釋問題。探索如何讓 setInterval 和 Hooks 和諧地玩耍，為什么是這種方式，以及這種方式給你帶來了什么新能力。

How to get the previous props or state?: 如何獲取變更前的 props 和 state ？官網(wǎng)提供的 useRef 來解決，也有人針對(duì)它進(jìn)行了封裝（How to compare oldValues and newValues on React Hooks useEffect?）

下面的是我的公眾號(hào)二維碼圖片，歡迎關(guān)注。