Share
React este, fără îndoială, cea mai populară bibliotecă pentru construirea de aplicații web interactive. Cu toate acestea, React nu este un cadru web complet. Se concentrează pe partea de vedere a venerabilului model MVC.
Există un întreg ecosistem React care abordează alte aspecte. În acest tutorial, veți afla despre unul dintre elementele cele mai de bază ale oricărei aplicații web - modul de preluare a datelor pentru afișare. Acest lucru nu este banal. Există mai multe locuri în ierarhia componentelor React, unde puteți prelua date. Când este nevoie să preluați datele este o altă preocupare. De asemenea, trebuie să luați în considerare ce tehnologie să utilizați pentru preluarea datelor și unde să le stocați.
La sfârșitul acestui tutorial, veți avea o imagine clară a modului în care funcționează preluarea datelor în React, avantajele și dezavantajele diferitelor abordări și modul de aplicare a acestor cunoștințe în aplicațiile dvs. React.
Să creăm un schelet pentru aplicația noastră React cu aplicația create-react:
> create-react-app reac-data-fetcher
Rezultatul este o structură de director destul de elaborată. Citiți fișierul README excelent dacă nu sunteți familiarizat cu aplicația create-react-react.
Am creat un server simplu pentru stocarea și servirea citatelor. Nu este subiectul acestui tutorial, iar rolul său este acela de a furniza un API la distanță pentru a demonstra modul de preluare a datelor cu React. Doar pentru a vă satisface curiozitatea, este o aplicație Python 3 bazată pe cadrul de îmbrățișare și folosește Redis ca stocare persistentă.
API-ul este extrem de simplu. Există un singur punct final, /citate. Aceasta returnează toate citatele stocate ca răspuns la o solicitare HTTP GET și puteți adăuga citate noi trimițând o solicitare POST HTTP.
Codul sursă complet este disponibil pe GitHub.
Aplicația demo este o aplicație React care comunică cu serviciul de ofertă, afișează toate citatele și vă permite să adăugați citate nouă.
Iată o captură de ecran:
Structura aplicației este foarte simplă. Am început cu un schelet creat de create-react-app și am adăugat două componente în sub-directorul src: QuoteList și AddQuoteForm. Aici este structura directorului (excluzând node_modules):
~ / git / react-data-fetcher> arbore -I node_modules -L 2. ├── README.md ├── README2.md ├── package.json ├── publice │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├─ ─ AddQuoteForm.css │ ├── AddQuoteForm.js │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── QuoteList.js │ ├── index.css │ ├ ─ index.js │ └── registruServiceWorker.js └─────────────────────────────────────────────────────────────────────────
Codul sursă complet este disponibil pe GitLab.
Componenta funcțională QuoteList afișează o listă de citate ca listă de gloanțe. Se așteaptă o serie de șiruri de caractere:
import Reacționează de la 'react' const QuoteList = (quotes) => quotes.map (quote =>
Este o componentă a componentei principale a aplicației.
API-ul de preluare este un API bazat pe promisiune care returnează un obiect de răspuns. Pentru a ajunge la conținutul actual JSON, trebuie să invocați json () metoda obiectului de răspuns.
fetchQuotes = () => this.setState (... this.state, isFetching: true) fetch (QUOTE_SERVICE_URL) .Apoi (răspuns => response.json ()) .Apoi (rezultat => this.setState (ghilimele : rezultat, isFetching: false)) .catch (e => console.log (e));
Reacția este, desigur, totul despre componente. Problema unde să plasați codul de preluare a datelor este importantă. Dacă vă factori bine codul, veți avea o mulțime de componente generice și unele componente specifice aplicației. Reacțiile și JavaScript în general sunt foarte flexibile, deci este posibil să se injecteze logica oriunde.
Cetările de preluare de la un API REST necesită o formă de votare, deoarece vreau ca citatele să fie mereu la zi. Dar aducerea inițială este, de asemenea, importantă. Componentele reactive au metode de ciclu de viață în care puteți implementa logica care se va executa la un moment dat. componentDidMount () Metoda se declanșează când componenta poate fi accesată și starea sa modificată. Este locul perfect pentru a iniția preluarea datelor.
Iată cum arată:
componentDidMount () this.fetchQuotes ()
Dacă doriți cu adevărat să reduceți timpul la prima vizualizare, vă recomandăm să utilizați componentWillMount () pentru a iniția asocierea dvs. de asincronă, dar riscați ca finalizarea să fie finalizată înainte ca componenta să fie montată. Nu recomand această abordare.
Consultați secțiunea Mastering the React Lifecycle Methods pentru mai multe detalii.
Intrați inițial în componentDidMount () este minunat, dar vreau să actualizez frecvent citatele. Într-un API bazat pe REST, singura soluție este de a sincroniza periodic serverul. Serviciul de cotație este foarte simplu și întoarce întotdeauna toate citatele.
Mai multe servicii scalabile vă vor oferi o modalitate de a verifica actualizările sau chiar dacă utilizați HTTP if-modify-since sau eTag. Aplicația noastră demo va aduce totul la fiecare 5 secunde, pornind un cronometru componentDidMount () și curățați componentWillUnmount ():
componentDidMount () this.fetchQuotes () this.timer = setInterval (() => this.fetchQuotes (), 5000); componentWillUnmount () this.timer = null;
Durata de interogare este o decizie specifică aplicației. Dacă aveți nevoie de actualizări în timp real și / sau de interogare care accentuează prea mult spatele, luați în considerare utilizarea WebSockets în loc de REST.
Uneori, preluarea datelor poate dura mult timp. În acest caz, afișarea unei bare de progres sau a unei animații strălucitoare pentru a permite utilizatorului să știe ce se întâmplă poate contribui mult la experiența utilizatorului. Acest lucru este deosebit de important atunci când utilizatorul inițiază preluarea datelor (de exemplu, făcând clic pe un buton de căutare).
În aplicația demonstrativă, afișez pur și simplu un mesaj care spune "Cetări de preluare ..." în timp ce o preluare este în curs de desfășurare. În face() metoda principală a componentei App, utilizez randarea condiționată prin verificarea state.isFetching membru.
render () const title = 'Citate pentru ya!' da acum = noua Data () retur ();titlu
this.state.isFetching? "Citește citate ...": "
fetchQuotes () metoda se ocupă de actualizare state.isFetching inițializându-l la adevărat atunci când pornește și stabilindu-l înapoi la false atunci când primește citatele:
fetchQuotes = () => this.setState (... this.state, isFetching: true) fetch (QUOTE_SERVICE_URL) .Apoi (răspuns => response.json ()) .Apoi (rezultat => this.setState (ghilimele : rezultat, isFetching: false)) .catch (e => console.log (e));
Eu fac foarte minim de manipulare a erorilor prin logarea erorilor prinse la consola. În funcție de aplicația dvs., puteți invoca o anumită logică de reîncercare, puteți notifica utilizatorul sau puteți afișa un anumit conținut.
API-ul de preluare are câteva ghilimele. Aceasta necesită un pas suplimentar de a extrage JSON-ul dintr-un răspuns. De asemenea, nu prinde toate erorile. De exemplu, 404 va fi returnat ca răspuns normal. Va trebui să verificați codul de răspuns și să rezolvați și erorile din rețea care sunt prinse.
Deci, va trebui să rezolvați erorile în două locuri. Dar puteți utiliza biblioteca axios.js pentru a aborda aceste probleme și pentru a avea un cod puțin mai concis, la prețul adăugării unei dependențe externe. Iată ce arată codul cu axii:
fetchQuotes = () => this.setState (... this.state, isFetching: true) axios.get (QUOTE_SERVICE_URL) .Apoi (răspuns => this.setState (citate: response.data, isFetching: fals) ) .catch (e => console.log (e);
Acest lucru nu pare prea mult, dar ajută. Codul pentru a adăuga un citat nou este mult mai concis cu axiogramele. Iată versiunea de preluare:
handleSubmitWithFetch = eveniment => lasa date = new FormData () data.append ( 'citat', this.state.quote) fetch (this.props.quote_service_url, metoda: 'POST', corp: date) .Apoi ( răspuns => răspuns.json ()) .catch (e => console.log (e)); event.preventDefault ();
Și aici este versiunea Axios:
(r => console.log (r)) .catch (e => console.log () = consola.log (e)); event.preventDefault ();
În acest tutorial ați învățat cum să preluați datele asincron într-o aplicație React. Am discutat metodele relevante ale ciclului de viață, chestionarea, raportarea progreselor și tratarea erorilor.
Ne-am uitat la două biblioteci bazate pe promisiuni: API-ul de preluare și axios.js. Acum, ieșiți acolo și construiți aplicații React minunate care accesează API-urile de la distanță.
În ultimii ani, React a crescut în popularitate. De fapt, avem un număr de elemente pe piață care sunt disponibile pentru cumpărare, revizuire, implementare și așa mai departe. Dacă sunteți în căutarea unor resurse suplimentare în jurul React, nu ezitați să le verificați.
Accentsconagua