哪一種方式更適合在React中獲取數據？

做者：Dmitri Pavlutin
譯者：小維FE
原文：dmitripavlutin.com

國外文章，筆者採用意譯的方式，以保證文章的可讀性。

當執行像數據獲取這樣的I/O操做時，你必須發起獲取請求，等待響應，將響應數據保存到組件的狀態中，最後渲染。異步的數據獲取會要求額外的工做來適應React的聲明性，React也在逐步改進去最小化這種額外的工做。生命週期函數，hooks和suspense都是React中獲取數據的方式，我將在下面的示例中分別討論它們的優缺點。只有瞭解每種方式的具體細節才能幫助你更好地在代碼中實現異步操做。

1. 使用生命週期函數獲取數據

下面這個應用必需要作兩件事情：

(1) 初始化獲取該公司的20位員工；

(2) 篩選出名稱包含查詢條件的員工。

在實現這些需求以前，回顧一下類組件的2個生命週期方法:

(1) componentDidMount()：在組件掛載後執行一次；

(2) componentDidUpdate(prevProps)：當props和state發生變化的時候執行。
<EmployeesPage>使用這兩個生命週期函數來實現了數據獲取邏輯：

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";

class EmployeesPage extends Component {
  constructor(props) {
    super(props);
    this.state = { employees: [], isFetching: true };
  }

  componentDidMount() {
    this.fetch();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.query !== this.props.query) {
      this.fetch();
    }
  }

  async fetch() {
    this.setState({ isFetching: true });
    const employees = await fetchEmployees(this.props.query);
    this.setState({ employees, isFetching: false });
  }

  render() {
    const { isFetching, employees } = this.state;
    if (isFetching) {
      return <div>Fetching employees....</div>;
    }
    return <EmployeesList employees={employees} />;
  }
}

打開示例來探索一下<EmployeesPage>是如何來獲取數據的。<EmployeesPage>有一個異步的fetch方法用來獲取數據，當獲取完成的時候，使用獲取的employees來更新組件的狀態。this.fetch()在componentDidMount()生命週期函數中執行：當組件初始化渲染完成後開始獲取員工數據。
當用戶在這個輸入框中輸入查詢條件後，query屬性會發生變動，每次在它發生變化的時候，this.fetch()都將會在componentDidUpdate生命週期函數中執行，從而來實現員工篩選的功能。雖然生命週期方法相對容易掌握，可是基於類的方法存在樣板代碼和可重用性困難。

優勢：
簡便。比較容易理解：生命週期方法componentDidMount在組件第一次初始化渲染後發起獲取數據的請求，當props發生變化的時候經過componentDidUpdate來從新獲取數據。

缺點：

(1) 樣板代碼。基於類的組件的代碼具備"儀式感"：繼承React.Component，而且須要在constructor中調用super(props)等等；

(2) this問題。使用this關鍵字很麻煩；

(3) 代碼重複。在componentDidMount和componentDidUpdate中的代碼其實大部分都是重複的；

(4) 難以重用。獲取員工的邏輯若是是在其餘的組件中就已經很難複用了。

2. 使用hooks獲取數據

對於基於類的組件來講，hooks是一個更好的選擇。做爲一個普通函數來說，hooks摒棄了具備"儀式感"的代碼而且更容易複用。
咱們首先來回顧一下useEffect(callback[, deps])鉤子函數的使用。這個鉤子函數在組件掛載後會執行callback，當依賴項deps發生變化後會繼續執行後續的渲染。在下面的示例中<EmployeesPage>使用useEffect()來獲取員工數據：

import React, { useState } from 'react';

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";

function EmployeesPage({ query }) {
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);

  useEffect(function fetch() {
    (async function() {
      setFetching(true);
      setEmployees(await fetchEmployees(query));
      setFetching(false);
    })();
  }, [query]);
  
  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

打開示例來看看useEffect()是如何來獲取數據的。你能夠看到使用了useEffect()的版本要比類組件的版本簡化得多。在EmployeesPage函數式組件中useEffect(fetch, [query])在組件第一次渲染後執行fetch回調，而且只有在query屬性發生變化後，組件纔會在重渲染後再次執行fetch回調。可是咱們還有提高的空間，hooks容許你將獲取員工的邏輯從<EmployeesPage>中提取出來，咱們來試試：

import React, { useState } from 'react';

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";

function useEmployeesFetch(query) {
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);

  useEffect(function fetch {
    (async function() {
      setFetching(true);
      setEmployees(await fetchEmployees(query));
      setFetching(false);
    })();
  }, [query]);

  return [isFetching, employees];
}

function EmployeesPage({ query }) {
  const [employees, isFetching] = useEmployeesFetch(query);
  
  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

咱們的數據獲取的邏輯已經被提取到useEmployeesFetch()中了。組件<EmployeesPage>已經沒有集成任何數據獲取相關的邏輯，而是專一於他最直接的工做：UI渲染。更重要的是，你能夠在任何須要獲取員工數據的組件中複用useEmployeesFetch()。
優勢

(1) 簡單明瞭。hooks沒有樣板代碼的約束由於它們只是普通的函數；

(2) 複用性。hooks中所實現的數據獲取邏輯是很容易被複用的。
缺點

(1) 入門障礙。hooks有點違反常規，你在使用以前必需要理解他們，hooks依賴閉包，因此你也有必要將它們弄清楚。

(2) 命令式的。使用hooks，你仍舊須要使用命令式的方式來執行數據獲取。

3. 使用suspense獲取數據

suspense提供了聲明性的方式來在React中異步獲取數據。
<Suspense>包裝一個執行異步操做的組件：

<Suspense fallback={<span>Fetch in progress...</span>}>
  <FetchSomething />
</Suspense>

當正在獲取數據的時候，suspense會渲染fallback屬性中的內容。當數據獲取完成後，suspense會使用獲取到的數據來渲染<FetchSomething />組件。咱們來看看如何將suspense運用到員工應用中：

import React, { Suspense } from "react";
import EmployeesList from "./EmployeesList";

function EmployeesPage({ resource }) {
  return (
    <Suspense fallback={<h1>Fetching employees....</h1>}>
      <EmployeesFetch resource={resource} />
    </Suspense>
  );
}

function EmployeesFetch({ resource }) {
  const employees = resource.employees.read();
  return <EmployeesList employees={employees} />;
}

打開示例來檢查suspense是如何工做的。<EmployeesPage>使用suspense來處理組件<EmployeesFetch>中的數據獲取邏輯。<EmployeesFetch>中的resource.employees是一個特殊的wrapped promise用來在後臺和suspense通訊，採用這種方式suspense能夠知道在<EmployeesFetch>被渲染以前須要暫停多久，而且知道當資源就緒後，能繼續渲染。

最大的亮點：Suspense採用一種聲明性和同步的方式來處理異步操做。

這些組件自己並無集成任何數據獲取相關的細節，相反它們聲明性地使用resource來渲染內容。沒有生命週期函數，沒有hooks，沒有async/await，也沒有在組件內部的回調：僅僅只是渲染資源。
優勢：

(1) 聲明性的。suspense容許你在React中以聲明性的方式執行異步操做；

(2) 簡單明瞭。聲明性代碼使用起來更加簡單，組件自己並不關心數據獲取的細節；

(3) 與獲取邏輯的鬆散耦合。由於使用suspense的組件自己是不知道如何獲取數據的：使用REST又或是GraphQL。suspense設定了一個邊界用來保護數據獲取的細節泄露到組件內部；

(4) 沒有競態條件。若是同時開啓了多個異步獲取的操做，suspense會使用最近一次的獲取請求。
缺點：
須要適配器。suspense須要已經實現了其fetching接口的專業的fetching庫或者適配器。

4. 總結

生命週期函數曾經很長一段時間是數據獲取的惟一手段。然而經過這種方式會帶來不少問題好比大量的樣板代碼，重複和複用難度。而使用hooks來獲取數據是一個更好的選擇：咱們減小了不少樣板代碼。suspense的好處是聲明性獲取數據，你的組件自己並不關心數據獲取的細節，同時suspense是最接近React自己的聲明性理念的。

你更喜歡哪一種獲取數據的方式呢？

原文: https://dmitripavlutin.com/react-fetch-lifecycle-methods-hooks-suspense/

5. 交流

今天主要分享了React中幾種數據獲取的方式以及每種方式的優缺點對比，旨在讓你們在異步操做中可以更駕輕就熟，但願能和你們相互討論技術，一塊兒交流學習。

文章已同步更新至Github博客，若覺文章尚可，歡迎前往star！

你的一個點贊，值得讓我付出更多的努力！

逆境中成長，只有不斷地學習，才能成爲更好的本身，與君共勉！