【React】406- React Hooks非同步操作二三事

  • 2019 年 11 月 11 日
  • 筆記

作者：小蘑菇小哥

React Hooks 是 React 16.8 的新功能，可以在不編寫 class 的情況下使用狀態等功能，從而使得函數式組件從無狀態的變化為有狀態的。React 的類型包 @types/react 中也同步把 React.SFC (Stateless Functional Component) 改為了 React.FC (Functional Component)。

通過這一升級，原先 class 寫法的組件也就完全可以被函數式組件替代。雖然是否要把老項目中所有類組件全部改為函數式組件因人而異，但新寫的組件還是值得嘗試的，因為程式碼量的確減少了很多，尤其是重複的程式碼（例如 componentDidMount + componentDidUpdate + componentWillUnmount = useEffect）。

從 16.8 發布（今年2月）至今也有大半年了，但本人水平有限，尤其在 useEffect 和非同步任務搭配使用的時候經常踩到一些坑。特作本文，權當記錄，供遇到同樣問題的同僚借鑒參考。我會講到三個項目中非常常見的問題：

  1. 如何在組件載入時發起非同步任務
  2. 如何在組件交互時發起非同步任務
  3. 其他陷阱

TL;DR

  1. 使用 useEffect 發起非同步任務，第二個參數使用空數組可實現組件載入時執行方法體，返回值函數在組件卸載時執行一次，用來清理一些東西，例如計時器。
  2. 使用 AbortController 或者某些庫自帶的訊號量 ( axios.CancelToken) 來控制中止請求，更加優雅地退出。
  3. 當需要在其他地方（例如點擊處理函數中）設定計時器，在 useEffect 返回值中清理時，使用局部變數或者 useRef 來記錄這個 timer。不要使用 useState。
  4. 組件中出現 setTimeout 等閉包時，盡量在閉包內部引用 ref 而不是 state，否則容易出現讀取到舊值的情況。
  5. useState 返回的更新狀態方法是非同步的，要在下次重繪才能獲取新值。不要試圖在更改狀態之後立馬獲取狀態。

如何在組件載入時發起非同步任務

這類需求非常常見，典型的例子是在列表組件載入時發送請求到後端，獲取列表後展現。

發送請求也屬於 React 定義的副作用之一，因此應當使用 useEffect 來編寫。基本語法我就不再過多說明，程式碼如下：

import React, { useState, useEffect } from 'react';  const SOME_API = '/api/get/value';  export const MyComponent: React.FC<{}> = () => {    const [loading, setLoading] = useState(true);    const [value, setValue] = useState(0);      useEffect(() => {        (async () => {            const res = await fetch(SOME_API);            const data = await res.json();            setValue(data.value);            setLoading(false);        })();    }, []);      return (        <>        {loading ? (            <h2>Loading...</h2>        ) : (            <h2>value is {value}</h2>        )}        </>    );}

如上是一個基礎的帶 Loading 功能的組件，會發送非同步請求到後端獲取一個值並顯示到頁面上。如果以示例的標準來說已經足夠，但要實際運用到項目中，還不得不考慮幾個問題。

如果在響應回來之前組件被銷毀了會怎樣？

React 會報一個 Warning

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup http://function.in Notification

大意是說在一個組件卸載了之後不應該再修改它的狀態。雖然不影響運行，但作為完美主義者代表的程式設計師群體是無法容忍這種情況發生的，那麼如何解決呢？

問題的核心在於，在組件卸載後依然調用了 setValue(data.value) 和 setLoading(false) 來更改狀態。因此一個簡單的辦法是標記一下組件有沒有被卸載，可以利用 useEffect 的返回值。

// 省略組件其他內容，只列出 diffuseEffect(() => {    let isUnmounted = false;    (async () => {        const res = await fetch(SOME_API);        const data = await res.json();        if (!isUnmounted) {            setValue(data.value);            setLoading(false);        }    })();      return () => {        isUnmounted = true;    }}, []);

這樣可以順利避免這個 Warning。

有沒有更加優雅的解法？

上述做法是在收到響應時進行判斷，即無論如何需要等響應完成，略顯被動。一個更加主動的方式是探知到卸載時直接中斷請求，自然也不必再等待響應了。這種主動方案需要用到 AbortController。

AbortController 是一個瀏覽器的實驗介面，它可以返回一個訊號量(singal)，從而中止發送的請求。這個介面的兼容性不錯，除了 IE 之外全都兼容（如 Chrome, Edge, FF 和絕大部分移動瀏覽器，包括 Safari）。

{    let isUnmounted = false;    const abortController = new AbortController(); // 創建    (async () => {        const res = await fetch(SOME_API, {            singal: abortController.singal, // 當做訊號量傳入        });        const data = await res.json();        if (!isUnmounted) {            setValue(data.value);            setLoading(false);        }    })();      return () => {        isUnmounted = true;        abortController.abort(); // 在組件卸載時中斷    }}, []);

singal 的實現依賴於實際發送請求使用的方法，如上述例子的 fetch 方法接受 singal 屬性。如果使用的是 axios，它的內部已經包含了 axios.CancelToken，可以直接使用，例子在這裡。

如何在組件交互時發起非同步任務

另一種常見的需求是要在組件交互（比如點擊某個按鈕）時發送請求或者開啟計時器，待收到響應後修改數據進而影響頁面。這裡和上面一節（組件載入時）最大的差異在於 React Hooks 只能在組件級別編寫，不能在方法（ dealClick）或者控制邏輯（ if, for 等）內部編寫，所以不能在點擊的響應函數中再去調用 useEffect。但我們依然要利用 useEffect 的返回函數來做清理工作。

以計時器為例，假設我們想做一個組件，點擊按鈕後開啟一個計時器(5s)，計時器結束後修改狀態。但如果在計時未到就銷毀組件時，我們想停止這個計時器，避免記憶體泄露。用程式碼實現的話，會發現開啟計時器和清理計時器會在不同的地方，因此就必須記錄這個 timer。看如下的例子：

import React, { useState, useEffect } from 'react';  export const MyComponent: React.FC<{}> = () => {    const [value, setValue] = useState(0);      let timer: number;      useEffect(() => {        // timer 需要在點擊時建立，因此這裡只做清理使用        return () => {            console.log('in useEffect return', timer); // <- 正確的值            window.clearTimeout(timer);        }    }, []);      function dealClick() {        timer = window.setTimeout(() => {            setValue(100);        }, 5000);    }      return (        <>            <span>Value is {value}</span>            <button onClick={dealClick}>Click Me!</button>        </>    );}

既然要記錄 timer，自然是用一個內部變數來存儲即可（暫不考慮連續點擊按鈕導致多個 timer 出現，假設只點一次。因為實際情況下點了按鈕還會觸發其他狀態變化，繼而介面變化，也就點不到了）。

這裡需要注意的是，如果把 timer 升級為狀態(state)，則程式碼反而會出現問題。考慮如下程式碼：

import React, { useState, useEffect } from 'react';  export const MyComponent: React.FC<{}> = () => {    const [value, setValue] = useState(0);    const [timer, setTimer] = useState(0); // 把 timer 升級為狀態      useEffect(() => {        // timer 需要在點擊時建立，因此這裡只做清理使用        return () => {            console.log('in useEffect return', timer); // <- 0            window.clearTimeout(timer);        }    }, []);      function dealClick() {        let tmp = window.setTimeout(() => {            setValue(100);        }, 5000);        setTimer(tmp);    }      return (        <>            <span>Value is {value}</span>            <button onClick={dealClick}>Click Me!</button>        </>    );}

有關語義上 timer 到底算不算作組件的狀態我們先拋開不談，僅就程式碼層面來看。利用 useState 來記住 timer 狀態，利用 setTimer 去更改狀態，看似合理。但實際運行下來，在 useEffect 返回的清理函數中，得到的 timer 卻是初始值，即 0。

為什麼兩種寫法會有差異呢？

其核心在於寫入的變數和讀取的變數是否是同一個變數。

第一種寫法程式碼是把 timer 作為組件內的局部變數使用。在初次渲染組件時， useEffect 返回的閉包函數中指向了這個局部變數 timer。在 dealClick 中設置計時器時返回值依舊寫給了這個局部變數（即讀和寫都是同一個變數），因此在後續卸載時，雖然組件重新運行導致出現一個新的局部變數 timer，但這不影響閉包內老的 timer，所以結果是正確的。

第二種寫法， timer 是一個 useState 的返回值，並不是一個簡單的變數。從 React Hooks 的源碼來看，它返回的是 [hook.memorizedState,dispatch]，對應我們接的值和變更方法。當調用 setTimer 和 setValue 時，分別觸發兩次重繪，使得 hook.memorizedState 指向了 newState（注意：不是修改，而是重新指向）。但 useEffect 返回閉包中的 timer 依然指向舊的狀態，從而得不到新的值。（即讀的是舊值，但寫的是新值，不是同一個）

如果覺得閱讀 Hooks 源碼有困難，可以從另一個角度去理解：雖然 React 在 16.8 推出了 Hooks，但實際上只是加強了函數式組件的寫法，使之擁有狀態，用來作為類組件的一種替代，但 React 狀態的內部機制沒有變化。在 React 中 setState 內部是通過 merge 操作將新狀態和老狀態合併後，重新返回一個新的狀態對象。不論 Hooks 寫法如何，這條原理沒有變化。現在閉包內指向了舊的狀態對象，而 setTimer 和 setValue 重新生成並指向了新的狀態對象，並不影響閉包，導致了閉包讀不到新的狀態。

我們注意到 React 還提供給我們一個 useRef， 它的定義是

useRef 返回一個可變的 ref 對象，其 current 屬性被初始化為傳入的參數（initialValue）。返回的 ref 對象在組件的整個生命周期內保持不變。

ref 對象可以確保在整個生命周期中值不變，且同步更新，是因為 ref 的返回值始終只有一個實例，所有讀寫都指向它自己。所以也可以用來解決這裡的問題。

;  export const MyComponent: React.FC<{}> = () => {    const [value, setValue] = useState(0);    const timer = useRef(0);      useEffect(() => {        // timer 需要在點擊時建立，因此這裡只做清理使用        return () => {            window.clearTimeout(timer.current);        }    }, []);      function dealClick() {        timer.current = window.setTimeout(() => {            setValue(100);        }, 5000);    }      return (        <>            <span>Value is {value}</span>            <button onClick={dealClick}>Click Me!</button>        </>    );}

事實上我們後面會看到， useRef 和非同步任務配合更加安全穩妥。

其他陷阱

修改狀態是非同步的

這個其實比較基礎了。

import React, { useState } from 'react';  export const MyComponent: React.FC<{}> = () => {    const [value, setValue] = useState(0);      function dealClick() {        setValue(100);        console.log(value); // <- 0    }      return (        <span>Value is {value}, AnotherValue is {anotherValue}</span>    );}

useState 返回的修改函數是非同步的，調用後並不會直接生效，因此立馬讀取 value 獲取到的是舊值（ 0）。

React 這樣設計的目的是為了性能考慮，爭取把所有狀態改變後只重繪一次就能解決更新問題，而不是改一次重繪一次，也是很容易理解的。

在 timeout 中讀不到其他狀態的新值
import React, { useState, useEffect } from 'react';  export const MyComponent: React.FC<{}> = () => {    const [value, setValue] = useState(0);    const [anotherValue, setAnotherValue] = useState(0);      useEffect(() => {        window.setTimeout(() => {            console.log('setAnotherValue', value) // <- 0            setAnotherValue(value);        }, 1000);        setValue(100);    }, []);      return (        <span>Value is {value}, AnotherValue is {anotherValue}</span>    );}

這個問題和上面使用 useState 去記錄 timer 類似，在生成 timeout 閉包時，value 的值是 0。雖然之後通過 setValue 修改了狀態，但 React 內部已經指向了新的變數，而舊的變數仍被閉包引用，所以閉包拿到的依然是舊的初始值，也就是 0。

要修正這個問題，也依然是使用 useRef，如下：

import React, { useState, useEffect, useRef } from 'react';  export const MyComponent: React.FC<{}> = () => {    const [value, setValue] = useState(0);    const [anotherValue, setAnotherValue] = useState(0);    const valueRef = useRef(value);    valueRef.current = value;      useEffect(() => {        window.setTimeout(() => {            console.log('setAnotherValue', valueRef.current) // <- 100            setAnotherValue(valueRef.current);        }, 1000);        setValue(100);    }, []);      return (        <span>Value is {value}, AnotherValue is {anotherValue}</span>    );}
還是 timeout 的問題

假設我們要實現一個按鈕，默認顯示 false。當點擊後更改為 true，但兩秒後變回 false（ true 和 false 可以互換）。考慮如下程式碼：

import React, { useState } from 'react';  export const MyComponent: React.FC<{}> = () => {    const [flag, setFlag] = useState(false);      function dealClick() {        setFlag(!flag);          setTimeout(() => {            setFlag(!flag);        }, 2000);    }      return (        <button onClick={dealClick}>{flag ? "true" : "false"}</button>    );}

我們會發現點擊時能夠正常切換，但是兩秒後並不會變回來。究其原因，依然在於 useState 的更新是重新指向新值，但 timeout 的閉包依然指向了舊值。所以在例子中， flag 一直是 false，雖然後續 setFlag(!flag)，但依然沒有影響到 timeout 裡面的 flag。

解決方法有二。

第一個還是利用 useRef

import React, { useState, useRef } from 'react';  export const MyComponent: React.FC<{}> = () => {    const [flag, setFlag] = useState(false);    const flagRef = useRef(flag);    flagRef.current = flag;      function dealClick() {        setFlag(!flagRef.current);          setTimeout(() => {            setFlag(!flagRef.current);        }, 2000);    }      return (        <button onClick={dealClick}>{flag ? "true" : "false"}</button>    );}

第二個是利用 setFlag 可以接收函數作為參數，並利用閉包和參數來實現

import React, { useState } from 'react';  export const MyComponent: React.FC<{}> = () => {    const [flag, setFlag] = useState(false);      function dealClick() {        setFlag(!flag);          setTimeout(() => {            setFlag(flag => !flag);        }, 2000);    }      return (        <button onClick={dealClick}>{flag ? "true" : "false"}</button>    );}

當 setFlag 參數為函數類型時，這個函數的意義是告訴 React 如何從當前狀態產生出新的狀態（類似於 redux 的 reducer，不過是只針對一個狀態的子 reducer）。既然是當前狀態，因此返回值取反，就能夠實現效果。

總結

在 Hook 中出現非同步任務尤其是 timeout 的時候，我們要格外注意。useState 只能保證多次重繪之間的狀態值是一樣的，但不保證它們就是同一個對象，因此出現閉包引用的時候，盡量使用 useRef 而不是直接使用 state 本身，否則就容易踩坑。反之如果的確碰到了設置了新值但讀取到舊值的情況，也可以往這個方向想想，可能就是這個原因所致。

參考文章

  • 官網的 useRef 說明
  • How to create React custom hooks for data fetching with useEffect
  • setTimeout in React Components Using Hooks
  • React - useState - why setTimeout function does not have latest state value?

Tags:

VirMach 便宜 VPS