使用React Hooks 時要避免的5個錯誤！
本文已經過原作者 Shadeed 授權翻譯。
很有可能你已經讀過很多關于如何使用React Hook 的文章。但有時候，知道何時不使用與知道如何使用同樣重要。
在這篇文章中，主要介紹一下 React hooks 錯誤使用方式，以及如何解決它們。
- 不要更改 Hook 調用順序
- 不要使用過時狀態
- 不要創建過時的閉包
- 不要將狀態用于基礎結構數據
- 不要忘記清理副作用
1.不要更改 Hook 調用順序
在寫這篇文章的前幾天，我編寫了一個通過id獲取游戲信息的組件，下面是一個簡單的版本 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})提取游戲信息并將其保存到狀態變量game中。
打開演示(https://codesandbox.io/s/hooks-order-warning-rdxpg?file=/pages/index.js) 。組件正確地執行獲取操作，并使用獲取的數據更新狀態。但是看看tab Eslint警告: 有 Hook 執行順序不正確的問題。
問題發生在這一判斷：
- function FetchGame({ id }) {
- if (!id) { return 'Please select a game to fetch'; }
- // ...
- }
當id為空時，組件渲染'Please select a game to fetch'并退出，不調用任何 Hook。
但是，如果 id不為空(例如等于'1')，則會調用useState()和 useEffect()。
有條件地執行 Hook 可能會導致難以調試的意外錯誤。React Hook的內部工作方式要求組件在渲染之間總是以相同的順序調用 Hook。
這正是鉤子的第一條規則:不要在循環、條件或嵌套函數內調用 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>
- );
- }
現在，無論id是否為空，useState()和useEffect() 總是以相同的順序被調用，這就是 Hook 應該始終被調用的方式。
2.不要使用過時狀態
下面的組件MyIncreaser在單擊按鈕時增加狀態變量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>
- </>
- );
- }
這里有趣一點的是，handleClick調用了3次狀態更新。
現在，在打開演示之前，問一個問題：如果單擊一次按鈕，計數器是否增加3?
打開演示(https://codesandbox.io/s/stale-variable-jo32q?file=/src/index.js)，點擊按鈕一次，看看結果。
不好意思，即使在handleClick()中3次調用了increase()，計數也只增加了1。
問題在于setCount(count + 1)狀態更新器。當按鈕被點擊時，React調用setCount(count + 1)3次
- const handleClick = () {
- increase();
- increase();
- increase();
- };
- / 等價:
- const handleClick = () {
- setCount(count + 1);
- // count variable is now stale
- setCount(count + 1);
- setCount(count + 1);
- };
setCount(count + 1)的第一次調用正確地將計數器更新為count + 1 = 0 + 1 = 1。但是，接下來的兩次setCount(count + 1)調用也將計數設置為1，因為它們使用了過時的stale狀態。
通過使用函數方式更新狀態來解決過時的狀態。我們用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>
- </>
- );
- }
這里有一個好規則可以避免遇到過時的變量：
如果你使用當前狀態來計算下一個狀態，總是使用函數方式來更新狀態:setValue(prevValue => prevValue + someResult)。
3.不要創建過時的閉包
React Hook 很大程序上依賴于閉包的概念。依賴閉包是它們如此富有表現力的原因。
JavaScript 中的閉包是從其詞法作用域捕獲變量的函數。不管閉包在哪里執行，它總是可以從定義它的地方訪問變量。
當使用 Hook 接受回調作為參數時(如useEffect(callback, deps)， useCallback(callback, deps))，你可能會創建一個過時的閉包，一個捕獲了過時的狀態或變量的閉包。
我們來看看一個使用useEffect(callback, deps) 而忘記正確設置依賴關系時創建的過時閉包的例子。
在組件
- 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)，點擊按鈕。在控制臺查看，每2秒打印的都 是 Count is: 0,，不管count狀態變量的實際值是多少。
為啥這樣子?
第一次渲染時， log 函數捕獲到的 count 的值為 0。
之后，當按鈕被單擊并且count增加時，setInterval取到的 count 值仍然是從初始渲染中捕獲count為0的值。log 函數是一個過時的閉包，因為它捕獲了一個過時的狀態變量count。
解決方案是讓useEffect()知道閉包log依賴于count，并正確重置計時器
- 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>
- </>
- );
- }
正確設置依賴關系后，一旦count發生變化，useEffect()就會更新setInterval()的閉包。
為了防止閉包捕獲舊值：確保提供給 Hook 的回調函數中使用依賴項。
4.不要將狀態用于基礎結構數據
有一次，我需要在狀態更新上調用副作用，在第一個渲染不用調用副作用。useEffect(callback, deps)總是在掛載組件后調用回調函數:所以我想避免這種情況。
我找到了以下的解決方案
- 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>
- );
- }
狀態變量isFirst用來判斷是否是第一次渲染。一旦更新setIsFirst(false)，就會出現另一個無緣無故的重新渲染。
保持count狀態是有意義的，因為界面需要渲染 count 的值。但是，isFirst不能直接用于計算輸出。
是否為第一個渲染的信息不應存儲在該狀態中。基礎結構數據，例如有關渲染周期(即首次渲染，渲染數量)，計時器ID(setTimeout()，setInterval())，對DOM元素的直接引用等詳細信息，應使用引用useRef()進行存儲和更新。
我們將有關首次渲染的信息存儲到 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是一個引用，用于保存是否為組件的第一個渲染的信息。isFirstRef.current屬性用于訪問和更新引用的值。
重要說明：更新參考isFirstRef.current = false不會觸發重新渲染。
5.不要忘記清理副作用
很多副作用，比如獲取請求或使用setTimeout()這樣的計時器，都是異步的。
如果組件卸載或不再需要該副作用的結果，請不要忘記清理該副作用。
下面的組件有一個按鈕。當按鈕被點擊時，計數器每秒鐘延遲增加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)，點擊開始按鈕。正如預期的那樣，狀態變量count每秒鐘都會增加。
在進行遞增操作時，單擊umount 按鈕，卸載組件。React會在控制臺中警告更新卸載組件的狀態。
修復DelayedIncreaser很簡單：只需從useEffect()的回調中返回清除函數：
- // ...
- useEffect(() => {
- if (increase) {
- const id = setInterval(() => {
- setCount(count => count + 1)
- }, 1000);
- return () => clearInterval(id); }
- }, [increase]);
- // ...
也就是說，每次編寫副作用代碼時，都要問自己它是否應該清理。計時器，頻繁請求(如上傳文件)，sockets 幾乎總是需要清理。
6. 總結
從React鉤子開始的最好方法是學習如何使用它們。
但你也會遇到這樣的情況:你無法理解為什么他們的行為與你預期的不同。知道如何使用React Hook還不夠:你還應該知道何時不使用它們。
首先不要做的是有條件地渲染 Hook 或改變 Hook 調用的順序。無論Props 或狀態值是什么，React都期望組件總是以相同的順序調用Hook。
要避免的第二件事是使用過時的狀態值。要避免過時 狀態，請使用函數方式更新狀態。
不要忘記指出接受回調函數作為參數的 Hook 的依賴關系:例如useEffect(callback, deps)，useCallback(callback, deps),這可以解決過時閉包問題。
不要將基礎結構數據(例如有關組件渲染周期，setTimeout()或setInterval())存儲到狀態中。經驗法則是將此類數據保存在 Ref 中。
最后，別忘了清除你的副作用。
~完，我是小智，我要去刷碗了。
作者：Shadeed 譯者：前端小智 來源：dmitripavlutin原文：https://dmitripavlutin.com/react-hooks-mistakes-to-avoid/
本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。
