解析React useEffect不支持async function示例

3403771864 發(fā)布于2022-11-17 22:08 / 669人閱讀

　　useEffect是很常見的，現(xiàn)在寫的是十分需求的。

　　useEffect(async()=>{ 
　　awaitgetPoiInfo();//請求數(shù)據(jù)
　　 },[]);

　　可是React 卻無法支持這樣做，就是因為 effect function 應(yīng)該返回一個銷毀函數(shù)（effect：是指return返回的cleanup函數(shù)），如果 useEffect 第一個參數(shù)傳入 async，返回值則變成了 Promise，會導(dǎo)致 react 在調(diào)用銷毀函數(shù)的時候報錯：function.apply is undefined。

　　React為什么這么設(shè)計呢？

　　1、useEffect 的返回值是要在卸載組件時調(diào)用的，React 需要在 mount 的這樣才可以獲取值。

　　2、useEffect() 似乎有個潛在邏輯：第二次觸發(fā) useEffect 里的回調(diào)前，前一次觸發(fā)的行為都執(zhí)行完成，返回的清理函數(shù)也執(zhí)行完成。這樣邏輯才清楚。而如果是異步的，情況會變得很復(fù)雜，可能會很容易寫出有 bug 的代碼。

　　下面有兩種改進的方法大家可以參考下：

　　簡單改造

　　1、簡單改造的寫法（不推薦）

　　第一種在內(nèi)部創(chuàng)建一個異步函數(shù)anyNameFunction，之后就是等待，在后來就是調(diào)用setData

　　可也有一個問題要知道，就是在asyncFunction請求有依賴外部的參數(shù)，不更新requestData 的 effect 的依賴，effect 就不會同步 props 和 state 帶來的變更，也就不回重新請求數(shù)據(jù)

　　useEffect(() => {
　　// Create an scoped async function in the hook
　　// 注意如果函數(shù)沒有使用組件內(nèi)的任何值，可以把它提到組件外面去定義
　　// 下面代碼可以提到外面，可以自由地在 effect 中使用，下面就不改啦
　　async function asyncFunction() {
　　await requestData();
　　setData(data)
　　}
　　// Execute the created function directly
　　anyNameFunction();
　　}, []); // 這里設(shè)置成[]數(shù)組，因為我們只想在掛載的時候運行它一次

　　或者 useEffect中異步函數(shù)采用IIFE寫法（ Immediately Invoked Function Expression即立即調(diào)用的函數(shù)式表達式）

　　useEffect(() => {
　　// Using an IIFE
　　(async function anyNameFunction() {
　　await requestData();
　　})();
　　}, []);

　　2、把異步提取成多帶帶函數(shù)或自定義hook（推薦）

　　第一種自定義 hook包裹，然后再effect中通過promise.then調(diào)用（github上大佬給的答案：github）

　　// 自定義hook
　　function useAsyncEffect(effect: () => Promise<void | (() => void)>, dependencies?: any[]) {
　　return useEffect(() => {
　　const cleanupPromise = effect()
　　return () => { cleanupPromise.then(cleanup => cleanup && cleanup()) }
　　}, dependencies)
　　}
　　// 使用
　　useAsyncEffect(async () => {
　　const count = await fetchData()
　　setCount(count)
　　}, [fetchData])

　　或者利用useCallback 包裝成hook

　　useCallback 本質(zhì)上是添加了一層依賴檢查，使用useCallback，函數(shù)完全可以參與到數(shù)據(jù)流中，可以說如果一個函數(shù)的輸入改變了，這個函數(shù)就改變了，如果沒有，函數(shù)也不會改變。

　　下面的例子中會依賴 type ，如果 type 保持不變，requestData 也會保持不變，effect 也不會重新運行，但是如果 type 修改了，requestData 也會隨之改變，因此會重新請求數(shù)據(jù)。　

　// 封裝
　　const requestData = useCallback(async () => {
　　changeLoading(true);
　　changeError(false);
　　changeList([]);
　　requestAPI.getFeature({ type }).then((data) => {
　　if (data) {
　　changeList(data);
　　}
　　}).catch((e) => {
　　changeError(true);
　　}).finally(() => {
　　changeLoading(false);
　　});
　　}, [type]); // type改變會重新生成函數(shù)
　　// 普通接口請求
　　useEffect(() => {
　　requestData();
　　}, [requestData]);
　　// 多帶帶處理外層刷新的接口請求
　　// refreshing是props傳遞的過來的，不應(yīng)該與state狀態(tài)改變混在一起，這也是hook的優(yōu)勢，將不相關(guān)的狀態(tài)邏輯拆分成更細(xì)粒度
　　useEffect(() => {
　　if (!refreshing) {
　　return;
　　}
　　requestData().then(() => {
　　getRefreshStatus(false);
　　});
　　}, [refreshing]);

　　今天講到這里，后面更多精彩內(nèi)容歡迎觀看。