React hooks異步操作踩坑記錄

更新時間：2024年03月13日 09:35:10 作者：代碼搬運(yùn)工_田先森

這篇文章主要介紹了React hooks異步操作踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、react hooks發(fā)異步請求

1、使用useEffect發(fā)起異步任務(wù)，第二個參數(shù)使用空數(shù)組可以實(shí)現(xiàn)組件加載的時候執(zhí)行方法體，返回值函數(shù)在組件卸載時執(zhí)行一次，用來清理一些東西。

2、使用 AbortController 或者某些庫自帶的信號量 ( axios.CancelToken) 來控制中止請求，更加優(yōu)雅地退出

3、當(dāng)需要在其他地方(例如點(diǎn)擊處理函數(shù)中)設(shè)定定時器，在useEffect返回值中清理時，使用局部變量或者useRef來記錄這個timer，不要使用useState.

4、組件中出現(xiàn)setTimeout等閉包時，盡量在閉包內(nèi)部引用ref而不是state，否則容易出現(xiàn)讀取到舊的值

5、useState返回的更新狀態(tài)方法是異步的，要在下次重繪的時候才能獲取新的值。不要試圖在更改狀態(tài)之后立馬獲取狀態(tài)。

二、如何在組件加載的時候發(fā)起異步任務(wù)

這類需求非常常見，典型的例子是在列表組件加載的時候發(fā)送請求到后端，獲取列表展現(xiàn)。

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>
        )
      }
    </>
  );
}

如上是一個基礎(chǔ)的帶 Loading 功能的組件，會發(fā)送異步請求到后端獲取一個值并顯示到頁面上。

如果以示例的標(biāo)準(zhǔn)來說已經(jīng)足夠，但要實(shí)際運(yùn)用到項(xiàng)目中，還不得不考慮幾個問題

三、如果在響應(yīng)回來之前組件被銷毀了會怎樣？

這時候React會報(bào)一個??警告信息：

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 subions and asynchronous tasks in a useEffect cleanup http://function.in Notification

就是說一個組件卸載之后不應(yīng)該再修改他的狀態(tài)。雖然不影響運(yùn)行，但是這種問題不應(yīng)該存在。那么如何解決？

問題的核心在于，在組件卸載后依然調(diào)用了 setValue(data.value)和 setLoading(false)來更改狀態(tài)。

因此一個簡單的辦法是標(biāo)記一下組件有沒有被卸載，可以利用 useEffect的返回值。

// 省略組件其他內(nèi)容，只列出 diff
useEffect( => {
  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。

有沒有更加優(yōu)雅的解法？

上述做法是在收到響應(yīng)時進(jìn)行判斷，即無論如何需要等響應(yīng)完成，略顯被動。

一個更加主動的方式是探知到卸載時直接中斷請求，自然也不必再等待響應(yīng)了。

這種主動方案需要用到 AbortController。

AbortController 是一個瀏覽器的實(shí)驗(yàn)接口，它可以返回一個信號量(singal)，從而中止發(fā)送的請求。

這個接口的兼容性不錯，除了 IE 之外全都兼容（如 Chrome, Edge, FF 和絕大部分移動瀏覽器，包括 Safari）。

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

singal 的實(shí)現(xiàn)依賴于實(shí)際發(fā)送請求使用的方法，如上述例子的 fetch方法接受 singal屬性。

如果使用的是 axios，它的內(nèi)部已經(jīng)包含了 axios.CancelToken，可以直接使用，例子在這里。

import React, { Component } from 'react';
import axios from 'axios';

class Example extends Component {
  signal = axios.CancelToken.source();

  state = {
    isLoading: false,
    user: {},
  }
  
  componentDidMount() {
    this.onLoadUser();
  }
  
  componentWillUnmount() {
    this.signal.cancel('Api is being canceled');
  }
  
  onLoadUser = async () => {
    try {
      this.setState({ isLoading: true });
      const response = await axios.get('https://randomuser.me/api/', {
        cancelToken: this.signal.token,
      })
      this.setState({ user: response.data, isLoading: true });
    } catch (err) {
      if (axios.isCancel(err)) {
        console.log('Error: ', err.message); // => prints: Api is being canceled
      } else {
        this.setState({ isLoading: false });
      }
    }
   } 
    render() {
      return (
        <div>
          <pre>{JSON.stringify(this.state.user, null, 2)}</pre>
        </div>
      )
    }
 
}

四、如何在組件交互時發(fā)起異步任務(wù)

? 另一種常見的需求是要在組件交互（比如點(diǎn)擊某個按鈕）時發(fā)送請求或者開啟計(jì)時器，待收到響應(yīng)后修改數(shù)據(jù)進(jìn)而影響頁面。

這里和上面一節(jié)（組件加載時）最大的差異在于 React Hooks 只能在組件級別編寫，不能在方法（dealClick）或者控制邏輯（if, for 等）內(nèi)部編寫，所以不能在點(diǎn)擊的響應(yīng)函數(shù)中再去調(diào)用 useEffect。但我們依然要利用 useEffect 的返回函數(shù)來做清理工作。

? 以計(jì)時器為例，假設(shè)我們想做一個組件，點(diǎn)擊按鈕后開啟一個計(jì)時器(5s)，計(jì)時器結(jié)束后修改狀態(tài)。

但如果在計(jì)時未到就銷毀組件時，我們想停止這個計(jì)時器，避免內(nèi)存泄露。用代碼實(shí)現(xiàn)的話，會發(fā)現(xiàn)開啟計(jì)時器和清理計(jì)時器會在不同的地方，因此就必須記錄這個 timer。

看如下的例子：

import React, { useState, useEffect } from 'react';
 
export const MyComponent: React.FC<{}> = () => {
    const [value, setValue] = useState(0);
 
    let timer: number;
 
    useEffect(() => {
        // timer 需要在點(diǎn)擊時建立，因此這里只做清理使用
        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，自然是用一個內(nèi)部變量來存儲即可（暫不考慮連續(xù)點(diǎn)擊按鈕導(dǎo)致多個 timer 出現(xiàn)，假設(shè)只點(diǎn)一次。因?yàn)閷?shí)際情況下點(diǎn)了按鈕還會觸發(fā)其他狀態(tài)變化，繼而界面變化，也就點(diǎn)不到了）。

這里需要注意的是，如果把 timer 升級為狀態(tài)(state)，則代碼反而會出現(xiàn)問題。

考慮如下代碼：

import React, { useState, useEffect } from 'react';
 
export const MyComponent: React.FC<{}> = () => {
    const [value, setValue] = useState(0);
    const [timer, setTimer] = useState(0); // 把 timer 升級為狀態(tài)
 
    useEffect(() => {
        // timer 需要在點(diǎn)擊時建立，因此這里只做清理使用
        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>
        </>
    );
}

有關(guān)語義上 timer 到底算不算作組件的狀態(tài)我們先拋開不談，僅就代碼層面來看。

利用 useState 來記住 timer 狀態(tài)，利用 setTimer 去更改狀態(tài)，看似合理。

但實(shí)際運(yùn)行下來，在 useEffect 返回的清理函數(shù)中，得到的 timer 卻是初始值，即 0。

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

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

第一種寫法: 代碼是把 timer 作為組件內(nèi)的局部變量使用。在初次渲染組件時，useEffect 返回的閉包函數(shù)中指向了這個局部變量 timer。在 dealClick 中設(shè)置計(jì)時器時返回值依舊寫給了這個局部變量（即讀和寫都是同一個變量），因此在后續(xù)卸載時，雖然組件重新運(yùn)行導(dǎo)致出現(xiàn)一個新的局部變量 timer，但這不影響閉包內(nèi)老的 timer，所以結(jié)果是正確的。

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

? 如果覺得閱讀 Hooks 源碼有困難，可以從另一個角度去理解：雖然 React 在 16.8 推出了 Hooks，但實(shí)際上只是加強(qiáng)了函數(shù)式組件的寫法，使之擁有狀態(tài)，用來作為類組件的一種替代，但 React 狀態(tài)的內(nèi)部機(jī)制沒有變化。在 React 中 setState 內(nèi)部是通過 merge 操作將新狀態(tài)和老狀態(tài)合并后，重新返回一個新的狀態(tài)對象。不論 Hooks 寫法如何，這條原理沒有變化?，F(xiàn)在閉包內(nèi)指向了舊的狀態(tài)對象，而 setTimer 和 setValue 重新生成并指向了新的狀態(tài)對象，并不影響閉包，導(dǎo)致了閉包讀不到新的狀態(tài)。

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

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

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

import React, { useState, useEffect, useRef } from 'react';
 
export const MyComponent: React.FC<{}> = () => {
    const [value, setValue] = useState(0);
    const timer = useRef(0);
 
    useEffect(() => {
        // timer 需要在點(diǎn)擊時建立，因此這里只做清理使用
        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>
        </>
    );
}

事實(shí)上我們后面會看到，useRef 和異步任務(wù)配合更加安全穩(wěn)妥。

五、其他陷阱

修改狀態(tài)是異步的

//錯誤例子
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 返回的修改函數(shù)是異步的，調(diào)用后并不會直接生效，因此立馬讀取 value 獲取到的是舊值（0）。

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

在 timeout 中讀不到其他狀態(tài)的新值

//錯誤例子
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 修改了狀態(tài)，但 React 內(nèi)部已經(jīng)指向了新的變量，而舊的變量仍被閉包引用，所以閉包拿到的依然是舊的初始值，也就是 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 的問題

假設(shè)我們要實(shí)現(xiàn)一個按鈕，默認(rèn)顯示 false。當(dāng)點(diǎn)擊后更改為 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>
    );
}

我們會發(fā)現(xiàn)點(diǎn)擊時能夠正常切換，但是兩秒后并不會變回來。

究其原因，依然在于 useState 的更新是重新指向新值，但 timeout 的閉包依然指向了舊值。

所以在例子中，flag 一直是 false，雖然后續(xù) 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 可以接收函數(shù)作為參數(shù)，并利用閉包和參數(shù)來實(shí)現(xiàn)(函數(shù)式更新)

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>
    );
}

當(dāng) setFlag 參數(shù)為函數(shù)類型時，這個函數(shù)的意義是告訴 React 如何從當(dāng)前狀態(tài)產(chǎn)生出新的狀態(tài)（類似于 redux 的 reducer，不過是只針對一個狀態(tài)的子 reducer）。既然是當(dāng)前狀態(tài)，因此返回值取反，就能夠?qū)崿F(xiàn)效果。