[[386276]]

本文已經(jīng)過原作者 Shadeed 授權(quán)翻譯。

很有可能你已經(jīng)讀過很多關(guān)于如何使用React Hook 的文章。但有時(shí)候，知道何時(shí)不使用與知道如何使用同樣重要。

在這篇文章中，主要介紹一下 React hooks 錯(cuò)誤使用方式，以及如何解決它們。

• 不要更改 Hook 調(diào)用順序
• 不要使用過時(shí)狀態(tài)
• 不要?jiǎng)?chuàng)建過時(shí)的閉包
• 不要將狀態(tài)用于基礎(chǔ)結(jié)構(gòu)數(shù)據(jù)
• 不要忘記清理副作用

1.不要更改 Hook 調(diào)用順序

在寫這篇文章的前幾天，我編寫了一個(gè)通過id獲取游戲信息的組件，下面是一個(gè)簡(jiǎn)單的版本 FetchGame：

function FetchGame({ id }) { 
  if (!id) { 
    return 'Please select a game to fetch'; 
  } 
 
  const [game, setGame] = useState({  
    name: '', 
    description: ''  
  }); 
 
  useEffect(() => { 
    const fetchGame = async () => { 
      const response = await fetch(`/api/game/${id}`); 
      const fetchedGame = await response.json(); 
      setGame(fetchedGame); 
    }; 
    fetchGame(); 
  }, [id]); 
 
  return ( 
    <div> <div>Name: {game.name}</div> <div>Description: {game.description}</div> </div> 
  );  

 

組件FetchGame 接收 id(即要獲取的游戲的ID)。useEffect() 在await fetch(/game/${id})提取游戲信息并將其保存到狀態(tài)變量game中。

打開演示(https://codesandbox.io/s/hooks-order-warning-rdxpg?file=/pages/index.js) 。組件正確地執(zhí)行獲取操作，并使用獲取的數(shù)據(jù)更新狀態(tài)。但是看看tab Eslint警告: 有 Hook 執(zhí)行順序不正確的問題。

 

問題發(fā)生在這一判斷：

function FetchGame({ id }) { 
 if (!id) { return 'Please select a game to fetch'; }   
   // ... 
} 

當(dāng)id為空時(shí)，組件渲染'Please select a game to fetch'并退出，不調(diào)用任何 Hook。

但是，如果 id不為空(例如等于'1')，則會(huì)調(diào)用useState()和 useEffect()。

有條件地執(zhí)行 Hook 可能會(huì)導(dǎo)致難以調(diào)試的意外錯(cuò)誤。React Hook的內(nèi)部工作方式要求組件在渲染之間總是以相同的順序調(diào)用 Hook。

這正是鉤子的第一條規(guī)則:不要在循環(huán)、條件或嵌套函數(shù)內(nèi)調(diào)用 Hook。

解決方法就是將條件判斷放到 Hook 后面：

function FetchGame({ id }) { 
  const [game, setGame] = useState({  
    name: '', 
    description: ''  
  }); 
 
  useEffect(() => { 
    const fetchGame = async () => { 
      const response = await fetch(`/api/game/${id}`); 
      const fetchedGame = await response.json(); 
      setGame(fetchedGame); 
    }; 
 if (id) {      fetchGame();     }  }, [id]); 
 
 if (!id) { return 'Please select a game to fetch'; } 
  return ( 
    <div> 
 <div>Name: {game.name}</div> 
 <div>Description: {game.description}</div> 
 </div> 
  ); 
} 

 

現(xiàn)在，無論id是否為空，useState()和useEffect() 總是以相同的順序被調(diào)用，這就是 Hook 應(yīng)該始終被調(diào)用的方式。

2.不要使用過時(shí)狀態(tài)

下面的組件MyIncreaser在單擊按鈕時(shí)增加狀態(tài)變量count:

function MyIncreaser() { 
  const [count, setCount] = useState(0); 
 
  const increase = useCallback(() => { 
    setCount(count + 1); 
  }, [count]); 
 
  const handleClick = () { 
 increase(); increase(); increase();  }; 
 
  return ( 
    <> 
 <button onClick={handleClick}>Increase</button> 
 <div>Counter: {count}</div> 
 </> 
  ); 
} 

 

這里有趣一點(diǎn)的是，handleClick調(diào)用了3次狀態(tài)更新。

現(xiàn)在，在打開演示之前，問一個(gè)問題：如果單擊一次按鈕，計(jì)數(shù)器是否增加3?

打開演示(https://codesandbox.io/s/stale-variable-jo32q?file=/src/index.js)，點(diǎn)擊按鈕一次，看看結(jié)果。

不好意思，即使在handleClick()中3次調(diào)用了increase()，計(jì)數(shù)也只增加了1。

問題在于setCount(count + 1)狀態(tài)更新器。當(dāng)按鈕被點(diǎn)擊時(shí)，React調(diào)用setCount(count + 1)3次

const handleClick = () { 
   increase(); 
   increase(); 
   increase(); 
 }; 
 
/ 等價(jià): 
 
 const handleClick = () { 
   setCount(count + 1); 
   // count variable is now stale 
   setCount(count + 1); 
   setCount(count + 1); 
 }; 

setCount(count + 1)的第一次調(diào)用正確地將計(jì)數(shù)器更新為count + 1 = 0 + 1 = 1。但是，接下來的兩次setCount(count + 1)調(diào)用也將計(jì)數(shù)設(shè)置為1，因?yàn)樗鼈兪褂昧诉^時(shí)的stale狀態(tài)。

通過使用函數(shù)方式更新狀態(tài)來解決過時(shí)的狀態(tài)。我們用setCount(count => count + 1)代替setCount(count + 1)：

function MyIncreaser() { 
  const [count, setCount] = useState(0); 
 
  const increase = useCallback(() => { 
 setCount(count => count + 1);  }, []); 
 
  const handleClick = () { 
    increase(); 
    increase(); 
    increase(); 
  }; 
 
  return ( 
    <> 
 <button onClick={handleClick}>Increase</button> 
 <div>Counter: {count}</div> 
 </> 
  ); 
} 

 

這里有一個(gè)好規(guī)則可以避免遇到過時(shí)的變量：

如果你使用當(dāng)前狀態(tài)來計(jì)算下一個(gè)狀態(tài)，總是使用函數(shù)方式來更新狀態(tài):setValue(prevValue => prevValue + someResult)。

3.不要?jiǎng)?chuàng)建過時(shí)的閉包

React Hook 很大程序上依賴于閉包的概念。依賴閉包是它們?nèi)绱烁挥斜憩F(xiàn)力的原因。

JavaScript 中的閉包是從其詞法作用域捕獲變量的函數(shù)。不管閉包在哪里執(zhí)行，它總是可以從定義它的地方訪問變量。

當(dāng)使用 Hook 接受回調(diào)作為參數(shù)時(shí)(如useEffect(callback, deps)， useCallback(callback, deps))，你可能會(huì)創(chuàng)建一個(gè)過時(shí)的閉包，一個(gè)捕獲了過時(shí)的狀態(tài)或變量的閉包。

我們來看看一個(gè)使用useEffect(callback, deps) 而忘記正確設(shè)置依賴關(guān)系時(shí)創(chuàng)建的過時(shí)閉包的例子。

在組件中，useEffect()每2秒打印一次count的值

 const [count, setCount] = useState(0); 
 
  useEffect(function() { 
    setInterval(function log() { 
      console.log(`Count is: ${count}`); 
    }, 2000); 
  }, []); 
 
  const handleClick = () => setCount(count => count + 1); 
 
  return ( 
    <> <button onClick={handleClick}>Increase</button> <div>Counter: {count}</div> </> 
  ); 
} 

 

打開演示(https://codesandbox.io/s/stale-variable-jo32q?file=/src/index.js)，點(diǎn)擊按鈕。在控制臺(tái)查看，每2秒打印的都 是 Count is: 0,，不管count狀態(tài)變量的實(shí)際值是多少。

為啥這樣子?

第一次渲染時(shí)， log 函數(shù)捕獲到的 count 的值為 0。

之后，當(dāng)按鈕被單擊并且count增加時(shí)，setInterval取到的 count 值仍然是從初始渲染中捕獲count為0的值。log 函數(shù)是一個(gè)過時(shí)的閉包，因?yàn)樗东@了一個(gè)過時(shí)的狀態(tài)變量count。

解決方案是讓useEffect()知道閉包log依賴于count，并正確重置計(jì)時(shí)器

function WatchCount() { 
  const [count, setCount] = useState(0); 
 
  useEffect(function() { 
    const id = setInterval(function log() { 
      console.log(`Count is: ${count}`); 
    }, 2000); 
 return () => clearInterval(id); }, [count]); 
  const handleClick = () => setCount(count => count + 1); 
 
  return ( 
    <> 
 <button onClick={handleClick}>Increase</button> 
 <div>Counter: {count}</div> 
 </> 
  ); 
} 

 

正確設(shè)置依賴關(guān)系后，一旦count發(fā)生變化，useEffect()就會(huì)更新setInterval()的閉包。

為了防止閉包捕獲舊值：確保提供給 Hook 的回調(diào)函數(shù)中使用依賴項(xiàng)。

4.不要將狀態(tài)用于基礎(chǔ)結(jié)構(gòu)數(shù)據(jù)

有一次，我需要在狀態(tài)更新上調(diào)用副作用，在第一個(gè)渲染不用調(diào)用副作用。useEffect(callback, deps)總是在掛載組件后調(diào)用回調(diào)函數(shù):所以我想避免這種情況。

我找到了以下的解決方案

function MyComponent() { 
  const [isFirst, setIsFirst] = useState(true); 
  const [count, setCount] = useState(0); 
 
  useEffect(() => { 
    if (isFirst) { 
      setIsFirst(false); 
      return; 
    } 
    console.log('The counter increased!'); 
  }, [count]); 
 
  return ( 
    <button onClick={() => setCount(count => count + 1)}> Increase </button> 
  ); 
} 

狀態(tài)變量isFirst用來判斷是否是第一次渲染。一旦更新setIsFirst(false)，就會(huì)出現(xiàn)另一個(gè)無緣無故的重新渲染。

保持count狀態(tài)是有意義的，因?yàn)榻缑嫘枰秩?count 的值。但是，isFirst不能直接用于計(jì)算輸出。

是否為第一個(gè)渲染的信息不應(yīng)存儲(chǔ)在該狀態(tài)中?；A(chǔ)結(jié)構(gòu)數(shù)據(jù)，例如有關(guān)渲染周期(即首次渲染，渲染數(shù)量)，計(jì)時(shí)器ID(setTimeout()，setInterval())，對(duì)DOM元素的直接引用等詳細(xì)信息，應(yīng)使用引用useRef()進(jìn)行存儲(chǔ)和更新。

我們將有關(guān)首次渲染的信息存儲(chǔ)到 Ref 中：

const isFirstRef = useRef(true);  const [count, setCount] = useState(0); 
 
 useEffect(() => { 
   if (isFirstRef.current) { 
     isFirstRef.current = false; 
     return; 
   } 
   console.log('The counter increased!'); 
 }, [count]); 
 
 return ( 
   <button onClick={() => setCounter(count => count + 1)}> 
Increase 
</button> 
 ); 

isFirstRef是一個(gè)引用，用于保存是否為組件的第一個(gè)渲染的信息。isFirstRef.current屬性用于訪問和更新引用的值。

重要說明：更新參考isFirstRef.current = false不會(huì)觸發(fā)重新渲染。

5.不要忘記清理副作用

很多副作用，比如獲取請(qǐng)求或使用setTimeout()這樣的計(jì)時(shí)器，都是異步的。

如果組件卸載或不再需要該副作用的結(jié)果，請(qǐng)不要忘記清理該副作用。

下面的組件有一個(gè)按鈕。當(dāng)按鈕被點(diǎn)擊時(shí)，計(jì)數(shù)器每秒鐘延遲增加1：

function DelayedIncreaser() { 
  const [count, setCount] = useState(0); 
  const [increase, setShouldIncrease] = useState(false); 
 
  useEffect(() => { 
    if (increase) { 
      setInterval(() => { 
        setCount(count => count + 1) 
      }, 1000); 
    } 
  }, [increase]); 
 
  return ( 
    <> <button onClick={() => setShouldIncrease(true)}> Start increasing </button> <div>Count: {count}</div> </> 
  ); 
} 

 

打開演示(https://codesandbox.io/s/unmounted-state-update-n1d3u?file=/src/index.js)，點(diǎn)擊開始按鈕。正如預(yù)期的那樣，狀態(tài)變量count每秒鐘都會(huì)增加。

在進(jìn)行遞增操作時(shí)，單擊umount 按鈕，卸載組件。React會(huì)在控制臺(tái)中警告更新卸載組件的狀態(tài)。

 

修復(fù)DelayedIncreaser很簡(jiǎn)單：只需從useEffect()的回調(diào)中返回清除函數(shù)：

// ... 
 
 useEffect(() => { 
   if (increase) { 
     const id = setInterval(() => { 
       setCount(count => count + 1) 
     }, 1000); 
return () => clearInterval(id);    } 
 }, [increase]); 
 
 // ... 

也就是說，每次編寫副作用代碼時(shí)，都要問自己它是否應(yīng)該清理。計(jì)時(shí)器，頻繁請(qǐng)求(如上傳文件)，sockets 幾乎總是需要清理。

6. 總結(jié)

從React鉤子開始的最好方法是學(xué)習(xí)如何使用它們。

但你也會(huì)遇到這樣的情況:你無法理解為什么他們的行為與你預(yù)期的不同。知道如何使用React Hook還不夠:你還應(yīng)該知道何時(shí)不使用它們。

首先不要做的是有條件地渲染 Hook 或改變 Hook 調(diào)用的順序。無論P(yáng)rops 或狀態(tài)值是什么，React都期望組件總是以相同的順序調(diào)用Hook。

要避免的第二件事是使用過時(shí)的狀態(tài)值。要避免過時(shí) 狀態(tài)，請(qǐng)使用函數(shù)方式更新狀態(tài)。

不要忘記指出接受回調(diào)函數(shù)作為參數(shù)的 Hook 的依賴關(guān)系:例如useEffect(callback, deps)，useCallback(callback, deps),這可以解決過時(shí)閉包問題。

不要將基礎(chǔ)結(jié)構(gòu)數(shù)據(jù)(例如有關(guān)組件渲染周期，setTimeout()或setInterval())存儲(chǔ)到狀態(tài)中。經(jīng)驗(yàn)法則是將此類數(shù)據(jù)保存在 Ref 中。

最后，別忘了清除你的副作用。

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

作者：Shadeed 譯者：前端小智 來源：dmitripavlutin原文：https://dmitripavlutin.com/react-hooks-mistakes-to-avoid/

 本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。