React中獲取資料的3種方法及優缺點
為了保證的可讀性,本文采用意譯而非直譯。
在執行 I/O 操作(例如資料提取)時,要先發送網路請求,然後等待響應,接著將響應資料儲存到元件的狀態,最後進行渲染。
在 React 中生命週期方法、Hooks和 Suspense是獲取資料的方法。接下用事例演示一下如何使用它們並說明每種方法的優點和缺點,以便咱們更好的編寫非同步操作程式碼。
1.使用生命週期方法請求資料
應用程式Employees.org
做兩件事:
1.一進入程式就獲取20
名員工。
2.可以通過過濾條件來篩選員工。
在實現這兩個需求之前,先來回顧一下React 類元件的2
個生命週期方法:
componentDidMount()
:元件掛載後執行
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>獲取員工資料中...</div>; } return <EmployeesList employees={employees} />; } }
開啟codesandbox可以檢視 <EmployeesPage>
獲取過程。
<EmployeesPage>
有一個獲取資料的非同步方法fetch()
。在獲取請求完成後,使用 setState
方法來更新employees
。
this.fetch()
在componentDidMount()
生命週期方法中執行:它在元件初始渲染時獲取員工資料。
當咱們關鍵字進行過濾時,將更新 props.query
。每當 props.query
更新,componentDidUpdate()
就會重新執行this.fetch()
。
雖然生命週期方法相對容易掌握,但是基於類的方法存在樣板程式碼使重用性變得困難。
優點
這種方法很容易理解:componentDidMount()
在第一次渲染時獲取資料,而componentDidUpdate()
在props
更新時重新獲取資料。
缺點
樣板程式碼
基於類的元件需要繼承React.Component
,在建構函式中執行 super(props)
等等。
this
使用 this
關鍵字很麻煩。
程式碼重複
componentDidMount()
和componentDidUpdate()
中的程式碼大部分是重複的。
很難重用
員工獲取邏輯很難在另一個元件中重用。
2.使用 Hooks 獲取資料
Hooks 是基於類獲取資料方式更好的選擇。作為簡單的函式,Hooks 不像類元件那樣還要繼承,並且也更容易重用。
簡單回憶一下useEffect(callback[,deps])
Hook 。這個hook在掛載後執行callback
,並且當依賴項deps
發生變化時重新渲染。
如下示例所示,在<EmployeesPage>
中使用useEffect()
獲取員工資料:
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} />; }
開啟codesandbox可以檢視useEffect()
如何獲取資料。
可以看到使用 Hooks 的 <EmployeesPage>
比使用類元件方式簡單了很多。
在<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,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>
沒有相應的獲取邏輯,只負責渲染介面工作。
更好的是,可以在需要獲取僱員的任何其他元件中重用useEmployeesFetch()
。
優點
清楚和簡單
Hooks沒有樣板程式碼,因為它們是普通的函式。
可重用性
在 Hooks 中實現的獲取資料邏輯很容易重用。
缺點需要前置知識
Hooks 有點違反直覺,因此在使用之前必須理解它們,Hooks 依賴於閉包,所以一定要很好地瞭解它們。
必要性
使用Hooks,仍然必須使用命令式方法來執行資料獲取。
3.使用 suspense 獲取資料
Suspense
提供了一種宣告性方法來非同步獲取React中的資料。
注意:截至2019年11月,Suspense 處於試驗階段。
<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} />; }
開啟codesandbox可以檢視Suspense
如何獲取資料。
<EmployeesPage>
使用Suspense
處理元件將獲取到資料傳遞給<EmployeesFetch>
元件。
<EmployeesFetch>
中的resource.employees
是一個特殊包裝的promise
,它在背後與Suspense
進行通訊。這樣,Suspense
就知道“掛起” <EmployeesFetch>
的渲染要花多長時間,並且當資源準備就緒時,就開始執行渲染工作。
最大的優點是:Suspense
以宣告性和同步的方式處理非同步操作。元件沒有複雜資料獲取邏輯,而是以宣告方式使用資源來渲染內容。在元件內部沒有生命週期,沒有 Hooks,async/await
,沒有回撥:僅展示介面。
優點
宣告式
Suspense
以宣告的方式在React中執行非同步操作。
簡單
宣告性程式碼使用起來很簡單,這些元件沒有複雜的資料獲取邏輯。
鬆耦合與獲取實現
使用Suspense
的元件看不出如何獲取資料:使用 REST 或 GraphQL。Suspense
設定一個邊界,保護獲取細節洩露到元件中。
標準狀態
如果請求了多個獲取操作,那麼Suspense
會使用最新的獲取請求。
原文:https://dmitripavlutin.com/react-fetch-lifecycle-methods-hooks-suspense/
4.總結
很長一段時間以來,生命週期方法一直是獲取資料方式的唯一解決方案。然而,使用它們獲取資料會有很多樣板程式碼、重複和可重用性方面的問題。
使用 Hooks 獲取資料是更好的選擇:更少的樣板程式碼。
Suspense
的好處是宣告性獲取。咱們的元件不會被獲取實現細節弄得亂七八糟。Suspense
更接近於React本身的宣告性本質。
原文:https://dmitripavlutin.com/react-fetch-lifecycle-methods-hooks-suspense/
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。