今天小編給大家分享的是React中獲取數(shù)據(jù)的方法及其優(yōu)缺點(diǎn)介紹,相信很多人都不太了解,為了讓大家更加了解React中獲取數(shù)據(jù)的方法,所以給大家總結(jié)了以下內(nèi)容,一起往下看吧。一定會(huì)有所收獲的哦。
你所需要的網(wǎng)站建設(shè)服務(wù),我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證,主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)網(wǎng)站建設(shè)、成都手機(jī)網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)建站擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺(jué)設(shè)計(jì)專(zhuān)才。在執(zhí)行 I/O 操作(例如數(shù)據(jù)提?。r(shí),要先發(fā)送網(wǎng)絡(luò)請(qǐng)求,然后等待響應(yīng),接著將響應(yīng)數(shù)據(jù)保存到組件的狀態(tài),最后進(jìn)行渲染。
在 React 中生命周期方法、Hooks和Suspense是獲取數(shù)據(jù)的方法。接下用事例演示一下如何使用它們并說(shuō)明每種方法的優(yōu)點(diǎn)和缺點(diǎn),以便咱們更好的編寫(xiě)異步操作代碼。
1.使用生命周期方法請(qǐng)求數(shù)據(jù)應(yīng)用程序Employees.org
做兩件事:
1.一進(jìn)入程序就獲取20
名員工。
2.可以通過(guò)過(guò)濾條件來(lái)篩選員工。
在實(shí)現(xiàn)這兩個(gè)需求之前,先來(lái)回顧一下React 類(lèi)組件的2
個(gè)生命周期方法:
componentDidMount()
:組件掛載后執(zhí)行componentDidUpdate(prevProps)
:當(dāng)props
或state
改變時(shí)執(zhí)行組件
使用上面兩個(gè)生命周期方法實(shí)現(xiàn)獲取邏輯:
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獲取員工數(shù)據(jù)中...; } return; } }
打開(kāi)codesandbox可以查看
獲取過(guò)程。
有一個(gè)獲取數(shù)據(jù)的異步方法fetch()
。在獲取請(qǐng)求完成后,使用setState
方法來(lái)更新employees
。
this.fetch()
在componentDidMount()
生命周期方法中執(zhí)行:它在組件初始渲染時(shí)獲取員工數(shù)據(jù)。
當(dāng)咱們關(guān)鍵字進(jìn)行過(guò)濾時(shí),將更新props.query
。每當(dāng)props.query
更新,componentDidUpdate()
就會(huì)重新執(zhí)行this.fetch()
。
雖然生命周期方法相對(duì)容易掌握,但是基于類(lèi)的方法存在樣板代碼使重用性變得困難。
優(yōu)點(diǎn)
這種方法很容易理解:componentDidMount()
在第一次渲染時(shí)獲取數(shù)據(jù),而componentDidUpdate()
在props
更新時(shí)重新獲取數(shù)據(jù)。
缺點(diǎn)
樣板代碼
基于類(lèi)的組件需要繼承React.Component
,在構(gòu)造函數(shù)中執(zhí)行super(props)
等等。
this
使用this
關(guān)鍵字很麻煩。
代碼重復(fù)
componentDidMount()
和componentDidUpdate()
中的代碼大部分是重復(fù)的。
很難重用
員工獲取邏輯很難在另一個(gè)組件中重用。
2.使用 Hooks 獲取數(shù)據(jù)Hooks 是基于類(lèi)獲取數(shù)據(jù)方式更好的選擇。作為簡(jiǎn)單的函數(shù),Hooks 不像類(lèi)組件那樣還要繼承,并且也更容易重用。
簡(jiǎn)單回憶一下useEffect(callback[, deps])
Hook 。這個(gè)hook在掛載后執(zhí)行callback
,并且當(dāng)依賴(lài)項(xiàng)deps
發(fā)生變化時(shí)重新渲染。
如下示例所示,在
中使用useEffect()
獲取員工數(shù)據(jù):
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) { returnFetching employees....; } return; }
打開(kāi)codesandbox可以查看useEffect()
如何獲取數(shù)據(jù)。
可以看到使用 Hooks 的
比使用類(lèi)組件方式簡(jiǎn)單了很多。
在
函數(shù)組件中的useEffect(fetch, [query])
,初始渲染之后執(zhí)行fetch
回調(diào)。此外,當(dāng)依賴(lài)項(xiàng)query
更新時(shí)也會(huì)重新執(zhí)行fetch
方法
。
但仍有優(yōu)化的空間。Hooks 允許咱們從
組件中提取雇員獲取邏輯,來(lái)看看:
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) { returnFetching employees....; } return; }
從useEmployeesFetch()
提到所需要的值。組件
沒(méi)有相應(yīng)的獲取邏輯,只負(fù)責(zé)渲染界面工作。
更好的是,可以在需要獲取雇員的任何其他組件中重用useEmployeesFetch()
。
清楚和簡(jiǎn)單
Hooks沒(méi)有樣板代碼,因?yàn)樗鼈兪瞧胀ǖ暮瘮?shù)。
可重用性
在 Hooks 中實(shí)現(xiàn)的獲取數(shù)據(jù)邏輯很容易重用。
缺點(diǎn)需要前置知識(shí)Hooks 有點(diǎn)違反直覺(jué),因此在使用之前必須理解它們,Hooks 依賴(lài)于閉包,所以一定要很好地了解它們。
必要性使用Hooks,仍然必須使用命令式方法來(lái)執(zhí)行數(shù)據(jù)獲取。
3.使用 suspense 獲取數(shù)據(jù)Suspense
提供了一種聲明性方法來(lái)異步獲取React中的數(shù)據(jù)。
注意:截至2019年11月,Suspense 處于試驗(yàn)階段。
包裝執(zhí)行異步操作的組件:
Fetch in progress...}>
數(shù)據(jù)獲取時(shí),Suspense
將顯示fallback
中的內(nèi)容,當(dāng)獲取完數(shù)據(jù)后,Suspense
將使用獲取到數(shù)據(jù)渲染
。
來(lái)看看怎么使用Suspense
:
import React, { Suspense } from "react"; import EmployeesList from "./EmployeesList"; function EmployeesPage({ resource }) { return (Fetching employees....}> ); } function EmployeesFetch({ resource }) { const employees = resource.employees.read(); return; }
打開(kāi)codesandbox可以查看Suspense
如何獲取數(shù)據(jù)。
使用Suspense
處理組件將獲取到數(shù)據(jù)傳遞給
組件。
中的resource.employees
是一個(gè)特殊包裝的promise
,它在背后與Suspense
進(jìn)行通信。這樣,Suspense
就知道“掛起”
的渲染要花多長(zhǎng)時(shí)間,并且當(dāng)資源準(zhǔn)備就緒時(shí),就開(kāi)始執(zhí)行渲染工作。
大的優(yōu)點(diǎn)是:Suspense
以聲明性和同步的方式處理異步操作。組件沒(méi)有復(fù)雜數(shù)據(jù)獲取邏輯,而是以聲明方式使用資源來(lái)渲染內(nèi)容。在組件內(nèi)部沒(méi)有生命周期,沒(méi)有 Hooks,async/await
,沒(méi)有回調(diào):僅展示界面。
聲明式
Suspense
以聲明的方式在React中執(zhí)行異步操作。
簡(jiǎn)單
聲明性代碼使用起來(lái)很簡(jiǎn)單,這些組件沒(méi)有復(fù)雜的數(shù)據(jù)獲取邏輯。
松耦合與獲取實(shí)現(xiàn)
使用Suspense
的組件看不出如何獲取數(shù)據(jù):使用 REST 或 GraphQL。Suspense
設(shè)置一個(gè)邊界,保護(hù)獲取細(xì)節(jié)泄露到組件中。
如果請(qǐng)求了多個(gè)獲取操作,那么Suspense
會(huì)使用最新的獲取請(qǐng)求。
原文:https://dmitripavlutin.com/re...
4.總結(jié)很長(zhǎng)一段時(shí)間以來(lái),生命周期方法一直是獲取數(shù)據(jù)方式的唯一解決方案。然而,使用它們獲取數(shù)據(jù)會(huì)有很多樣板代碼、重復(fù)和可重用性方面的問(wèn)題。
使用 Hooks 獲取數(shù)據(jù)是更好的選擇:更少的樣板代碼。
Suspense
的好處是聲明性獲取。咱們的組件不會(huì)被獲取實(shí)現(xiàn)細(xì)節(jié)弄得亂七八糟。Suspense
更接近于React本身的聲明性本質(zhì)。
英文原文地址:https://dmitripavlutin.com/react-fetch-lifecycle-methods-hooks-suspense/
為了保證的可讀性,本文采用意譯而非直譯。
關(guān)于React中獲取數(shù)據(jù)的方法及其優(yōu)缺點(diǎn)介紹就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值,可以學(xué)以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。