Se vi estas React-programisto, kiu ankoraŭ ne lernis pri React-hokoj, nun estas la momento. Ĉi tiu afiŝo trairos la useEffect React Hook detale. Ĝi estas la hokekvivalento de svisa armea tranĉilo. Ĝi solvas diversajn problemojn, kiel akiri datumojn kiam komponanto muntas, kiel ruli kodon kiam ŝtato aŭ apogilo ŝanĝiĝas, kiel agordi tempigilojn aŭ intervalojn, ktp.
UseEffect estas uzata por preskaŭ ĉio, kion vi volas "fari" en React-komponento, kiu ne resendas JSX (ajnajn kromefikojn). Vi ankaŭ povas havi plurajn uzajn Efektojn per ero.
Ĉio ĉi tiu potenco havas koston: krom se vi komprenas kiel ĝi funkcias, ĝi povas esti perpleksa. En ĉi tiu afiŝo, ni rigardos diversajn ekzemplojn por ke vi povu kapti la koncipan modelon kaj apliki ĝin al via propra kodo.
Reagu Hokojn – Kion ĝi provas solvi?
Hokoj unue estis lanĉitaj en React-versio 16.8 kaj nun estas utiligitaj per multaj React-projektoj. Hokoj venkas la problemon de koda ripeto inter komponantoj. Ili estas skribitaj sen la uzo de klasoj. Ĉi tio ne implicas, ke React forlasas klasojn; hokoj estas simple alternativa metodo.
React permesas vin rapide krei kompleksajn komponantojn kun ŝtata logiko. Estas malfacile apartigi ĉi tiujn komponentojn ĉar la klaso dependas de React Lifecycle Methods. Ĉi tie eniras React Hooks.
Ili permesas vin dividi komponenton en pli malgrandajn funkciojn. Anstataŭ dividi kodon en pli malgrandajn pecojn surbaze de Vivciklo-metodoj, vi nun povas aranĝi kaj apartigi kodon en pli malgrandajn unuojn depende de funkcieco.
Kio estas useEffect Hook?
Hokoj estas funkcioj, kiuj permesas vin aliri ŝtatajn kaj aliajn reakciajn kapablojn sen devi skribi ES6-klasojn. La reagi hokoj API havas hokon nomitan useEffect. Se vi konas reagi vivociklojn, la useEffect hoko estas la sama kiel la componentDidMount, componentDidUpdateKaj komponantoWillUnmount vivciklaj metodoj kombinitaj.
Laŭ la dokumentado de React Hooks, ĝi estis kreita por solvi iujn problemojn kun metodoj de vivociklo de ES6-klasaj komponantoj.
sintakso
La unua argumento estas revokfunkcio, kiu estas ekzekutita defaŭlte post ĉiu bildigo. La dua parametro estas laŭvola Dependeca tabelo kiu instrukcias al la Hoko revoki nur se la cela stato ŝanĝiĝas.
La Hoko komparas la historiajn kaj nunajn statojn de ĉiu dependeco. Se la du valoroj ne kongruas, la Hoko alvokas la revokon specifitan en la unua parametro. Dependecaj tabeloj ŝanĝas la kutiman revokan konduton kaj garantias, ke la Hoko ignoras ĉiujn aliajn komponentojn en la komponentamplekso.
Baza uzado
Por konservi mesaĝon, mi uzas React useState en la koda specimeno supre. Post tio, mi prenas mian mesaĝan staton variablon kaj presas ĝin sur la ekrano. Tamen, mi nun volas uzi Efekton por modifi la mesaĝon sekundon post kiam la komponanto estis muntita.
Mi enmetis mian efikon malantaŭ la linio useState post importo de useEffect el la kadro React. La unua parametro por uzi Efekton estas funkcio. Kiam ĉi tiu funkcio pritraktilo estas ekzekutita, ĝi prizorgos iujn ajn kromefikojn, kiujn vi provizas. La funkcio estas revokfunkcio kiu estas vokita kiam unu el la React-komponentaj vivociklokazaĵoj okazas.
Kiam uzi ĝin?
La useEffect-hoko povas esti utila en diversaj situacioj. La jenaj estas la plej decidaj:
- Ni povas ŝanĝi ĉi tiun parametron de la klienta flanko kiam ni volas preni datumojn depende de provizita argumento. Ĝi estos rememorita post kiam la parametro estos ĝisdatigita kun freŝaj datumoj.
- Se ni volas preni datumojn de API-finpunkto kaj montri ĝin ĉe la kliento. Kiam nia komponento bildigas, la funkcio aŭ pritraktilo donita al la useEffect-hoko estas ekzekutita, kaj datumoj en la komponentoŝtatoj estas prenitaj. Tiuj statusoj tiam estas utiligitaj en uzantinterfackomponentoj.
- Kiam via komponanto dependas de datumoj de la ekstera mondo kaj ni ne povas certigi, ke la datumoj alvenos, ni uzu Efekton (eble la servilo estas tie malsupre). Prefere ol ĵeti problemojn kaj malhelpi aliajn komponantojn montriĝi, metu ilin en la hokon useEffect.
Uzu kazojn
Se la komponanto rediras post la unua kuro, ĝi ne efektiviĝos.
Kiam ajn komponanto bildigas aŭ reprezentas, ĝi ĉiam devus esti ekzekutita.
Defaŭlte, la programo funkcias nur unufoje. Poste, se la prop-valoroj ŝanĝiĝas, rulu:
Por nesinkronaj agadoj, ĉiam uzu useEffect.
useEffect-kodblokoj estas evidentaj signoj de nesinkronaj laboroj por viaj kunlaboristoj. Eblas krei nesinkronan kodon sen uzi useEffect, sed ĉi tio ne estas la "React-metodo", kaj ĝi pliigas kaj la kompleksecon kaj la riskon de eraroj.
Uzi useEffect anstataŭ skribi nesinkronan kodon, kiu povas haltigi la UI, estas konata tekniko en la React-komunumo, precipe la maniero, kiel la React-teamo konstruis ĝin por fari kromefikon.
Alia avantaĝo de utiligo de ĝi estas, ke programistoj povas simple revizii la kodon kaj tuj detekti kodon, kiu funkcias "ekster la kontrolfluo", kiu iĝas grava nur post la unua bildiga ciklo. Krome, la blokoj taŭgas por eltiro en reuzeblajn kaj eĉ pli semantikajn kutimajn Hokojn.
Ekzemplo
Uzante la useEffect-kodon, pliigu nombron por sekundo.
konkludo
Kompreni la subestajn desegnajn principojn kaj plej bonajn praktikojn de la useEffect Hook, laŭ mi, estas kritika kapablo lerni se vi volas fariĝi venontnivela React-programisto.
Por resumi, la useEffect Hook ricevas funkcion kiu inkluzivas imperativon, eble efikan plenan logikon. La dependeca tabelo, kiu estas la dua parametro, povas esti uzata por influi la ekzekuton. Traktante ĝin, ankaŭ necesas skribi purigan kodon uzante la revenan funkcion.
Sciigu nin en la komentoj ĉu la artikolo estis helpema.
Lasi Respondon