React中怎么獲取數據

本篇內容介紹了“React中怎么獲取數據”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　在執行I/O操作（例如數據提取）時，要先發送網絡請求，然后等待響應，接著將響應數據保存到組件的狀態，最后進行渲染。

　　在React中生命周期方法、Hooks和Suspense是獲取數據的方法。接下用事例演示一下如何使用它們并說明每種方法的優點和缺點，以便咱們更好的編寫異步操作代碼。

　　1.使用生命周期方法請求數據

　　應用程序Employees.org做兩件事：

　　1.一進入程序就獲取20名員工。

　　2.可以通過過濾條件來篩選員工。

　　1.gif

　　在實現這兩個需求之前，先來回顧一下React類組件的2個生命周期方法:

　　componentDidMount()：組件掛載后執行

　　componentDidUpdate(prevProps):當props或state改變時執行

　　組件<EmployeesPage>使用上面兩個生命周期方法實現獲取邏輯：

　　importEmployeesListfrom"./EmployeesList";

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

　　classEmployeesPageextendsComponent{

　　constructor(props){

　　super(props);

　　this.state={employees:[],isFetching:true};

　　}

　　componentDidMount(){

　　this.fetch();

　　}

　　componentDidUpdate(prevProps){

　　if(prevProps.query!==this.props.query){

　　this.fetch();

　　}

　　}

　　asyncfetch(){

　　this.setState({isFetching:true});

　　constemployees=awaitfetchEmployees(this.props.query);

　　this.setState({employees,isFetching:false});

　　}

　　render(){

　　const{isFetching,employees}=this.state;

　　if(isFetching){

　　return<div>獲取員工數據中...</div>;

　　}

　　return<EmployeesListemployees={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()獲取員工數據：

　　importEmployeesListfrom"./EmployeesList";

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

　　functionEmployeesPage({query}){

　　const[isFetching,setFetching]=useState(false);

　　const[employees,setEmployees]=useState([]);

　　useEffect(functionfetch(){

　　(asyncfunction(){

　　setFetching(true);

　　setEmployees(awaitfetchEmployees(query));

　　setFetching(false);

　　})();

　　},[query]);

　　if(isFetching){

　　return<div>Fetchingemployees....</div>;

　　}

　　return<EmployeesListemployees={employees}/>;

　　}

　　打開codesandbox可以查看useEffect()如何獲取數據。

　　可以看到使用Hooks的<EmployeesPage>比使用類組件方式簡單了很多。

　　在<EmployeesPage>函數組件中的useEffect(fetch，[query])，初始渲染之后執行fetch回調。此外，當依賴項query更新時也會重新執行fetch方法

　　。

　　但仍有優化的空間。Hooks允許咱們從<EmployeesPage>組件中提取雇員獲取邏輯，來看看：

　　importReact,{useState}from'react';

　　importEmployeesListfrom"./EmployeesList";

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

　　functionuseEmployeesFetch(query){//這行有變化

　　const[isFetching,setFetching]=useState(false);

　　const[employees,setEmployees]=useState([]);

　　useEffect(functionfetch{

　　(asyncfunction(){

　　setFetching(true);

　　setEmployees(awaitfetchEmployees(query));

　　setFetching(false);

　　})();

　　},[query]);

　　return[isFetching,employees];

　　}

　　functionEmployeesPage({query}){

　　const[employees,isFetching]=useEmployeesFetch(query);//這行有變化

　　if(isFetching){

　　return<div>Fetchingemployees....</div>;

　　}

　　return<EmployeesListemployees={employees}/>;

　　}

　　從useEmployeesFetch()提到所需要的值。組件<EmployeesPage>沒有相應的獲取邏輯，只負責渲染界面工作。

　　更好的是，可以在需要獲取雇員的任何其他組件中重用useEmployeesFetch()。

　　優點

　　清楚和簡單

　　Hooks沒有樣板代碼，因為它們是普通的函數。

　　可重用性

　　在Hooks中實現的獲取數據邏輯很容易重用。

　　缺點

　　需要前置知識

　　Hooks有點違反直覺，因此在使用之前必須理解它們，Hooks依賴于閉包，所以一定要很好地了解它們。

　　必要性

　　使用Hooks，仍然必須使用命令式方法來執行數據獲取。

　　3.使用suspense獲取數據

　　Suspense提供了一種聲明性方法來異步獲取React中的數據。

　　注意：截至2019年11月，Suspense處于試驗階段。

　　<Suspense>包裝執行異步操作的組件:

　　<Suspensefallback={<span>Fetchinprogress...</span>}>

　　<FetchSomething/>

　　</Suspense>

　　數據獲取時，Suspense將顯示fallback中的內容，當獲取完數據后，Suspense將使用獲取到數據渲染<FetchSomething/>。

　　來看看怎么使用Suspense：

　　importReact,{Suspense}from"react";

　　importEmployeesListfrom"./EmployeesList";

　　functionEmployeesPage({resource}){

　　return(

　　<Suspensefallback={<h2>Fetchingemployees....</h2>}>

　　<EmployeesFetchresource={resource}/>

　　</Suspense>

　　);

　　}

　　functionEmployeesFetch({resource}){

　　constemployees=resource.employees.read();

　　return<EmployeesListemployees={employees}/>;

　　}

　　打開codesandbox可以查看Suspense如何獲取數據。

　　<EmployeesPage>使用Suspense處理組件將獲取到數據傳遞給<EmployeesFetch>組件。

　　<EmployeesFetch>中的resource.employees是一個特殊包裝的promise，它在背后與Suspense進行通信。這樣，Suspense就知道“掛起”<EmployeesFetch>的渲染要花多長時間，并且當資源準備就緒時，就開始執行渲染工作。

　　最大的優點是:Suspense以聲明性和同步的方式處理異步操作。組件沒有復雜數據獲取邏輯，而是以聲明方式使用資源來渲染內容。在組件內部沒有生命周期，沒有Hooks，async/await，沒有回調：僅展示界面。

　　優點

　　聲明式

　　Suspense以聲明的方式在React中執行異步操作。

　　簡單

　　聲明性代碼使用起來很簡單，這些組件沒有復雜的數據獲取邏輯。

　　松耦合與獲取實現

　　使用Suspense的組件看不出如何獲取數據:使用REST或GraphQL。Suspense設置一個邊界，保護獲取細節泄露到組件中。

　　標準狀態

　　如果請求了多個獲取操作，那么Suspense會使用最新的獲取請求。

“React中怎么獲取數據”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！