React Hooks異步操做防踩坑指南

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

經過這一升級，原先 class 寫法的組件也就徹底能夠被函數式組件替代。雖然是否要把老項目中全部類組件所有改成函數式組件因人而異，但新寫的組件仍是值得嘗試的，由於代碼量的確減小了不少，尤爲是重複的代碼（例如 componentDidMount + componentDidUpdate + componentWillUnmount = useEffect）。

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

1. 如何在組件加載時發起異步任務
2. 如何在組件交互時發起異步任務
3. 其餘陷阱

1、react Hooks 發起異步請求

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

2、如何在組件加載時發起異步任務

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

發送請求也屬於 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 功能的組件，會發送異步請求到後端獲取一個值並顯示到頁面上。若是以示例的標準來講已經足夠，但要實際運用到項目中，還不得不考慮幾個問題。

3、若是在響應回來以前組件被銷燬了會怎樣？

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

大意是說在一個組件卸載了以後不該該再修改它的狀態。雖然不影響運行，但做爲完美主義者表明的程序員羣體是沒法容忍這種狀況發生的，那麼如何解決呢？

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

// 省略組件其餘內容，只列出 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。

　　有沒有更加優雅的解法？

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

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

useEffect( => {
  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，能夠直接使用，例子在這裏。

 

4、如何在組件交互時發起異步任務

另外一種常見的需求是要在組件交互（好比點擊某個按鈕）時發送請求或者開啓計時器，待收到響應後修改數據進而影響頁面。這裏和上面一節（組件加載時）最大的差別在於 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 的返回值始終只有一個實例，全部讀寫都指向它本身。因此也能夠用來解決這裏的問題。

import React, { useState, useEffect, useRef } from 'react';
  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?
• 博客文章：https://www.sohu.com/a/348870257_463970