As jy 'n React-ontwikkelaar is wat nog nie van React-hake geleer het nie, is dit nou die oomblik. Hierdie pos sal die useEffect React Hook in detail deurgaan. Dit is die haak-ekwivalent van 'n Switserse weermagmes. Dit los 'n verskeidenheid probleme op, soos hoe om data te kry wanneer 'n komponent monteer, hoe om kode te laat loop wanneer 'n toestand of 'n stut verander, hoe om tydtellers of intervalle op te stel, ensovoorts.
'n UseEffect word gebruik vir byna alles wat jy wil "doen" in 'n React-komponent wat nie JSX terugstuur nie (enige tipe newe-effek). Jy kan ook verskeie gebruikseffekte per komponent hê.
Al hierdie krag kom teen 'n prys: tensy jy verstaan hoe dit werk, kan dit verwarrend wees. In hierdie pos sal ons na 'n verskeidenheid voorbeelde kyk sodat jy die konseptuele model kan begryp en dit op jou eie kode kan toepas.
Reageer Hooks – Wat probeer dit oplos?
Hakies is die eerste keer in React weergawe 16.8 bekendgestel en word nou deur baie React-projekte gebruik. Hooks oorkom die probleem van kodeherhaling tussen komponente. Hulle word geskryf sonder die gebruik van klasse. Dit impliseer nie dat React klasse laat vaar nie; hake is bloot 'n alternatiewe metode.
React laat jou toe om vinnig gesofistikeerde komponente met statige logika te skep. Dit is moeilik om hierdie komponente te skei aangesien die klas staatmaak op React Lifecycle Methods. Dit is waar React Hooks inkom.
Hulle laat jou toe om 'n komponent in kleiner funksies te verdeel. In plaas daarvan om kode in kleiner stukke te verdeel gebaseer op lewensiklusmetodes, kan jy nou kode rangskik en skei in kleiner eenhede, afhangende van funksionaliteit.
Wat is useEffect Hook?
Hakies is funksies wat jou toelaat om toegang tot toestand- en ander reaksievermoëns te kry sonder om ES6-klasse te hoef te skryf. Die react hooks API het 'n haak genaamd useEffect. As jy vertroud is met reaksie-lewensiklusse, is die useEffect-haak dieselfde as die komponentDidMount, componentHidUpdate, en componentWillUnount lewensiklusmetodes gekombineer.
Volgens die React Hooks-dokumentasie is dit geskep om sommige van die probleme met ES6-klaskomponent-lewensiklusmetodes op te los.
sintaksis
Die eerste argument is 'n terugbelfunksie, wat by verstek na elke lewering uitgevoer word. Die tweede parameter is 'n opsionele afhanklikheidskikking wat die Hook opdrag gee om slegs terug te bel as die teikentoestand verander.
The Hook vergelyk elke afhanklikheid se historiese en huidige toestande. As die twee waardes nie ooreenstem nie, roep die Hook die terugbel op wat in die eerste parameter gespesifiseer is. Afhanklikheidskikkings verander die gewone terugbelgedrag en waarborg dat die Hook alle ander komponente in die komponentomvang ignoreer.
Basiese gebruik
Om 'n boodskap te stoor, gebruik ek React useState in die kodevoorbeeld hierbo. Daarna neem ek my boodskapstatusveranderlike en druk dit op die skerm. Ek wil egter nouEffect gebruik om die boodskap te wysig 'n sekonde nadat die komponent gemonteer is.
Ek het my effek agter die useState-lyn ingevoeg nadat ek useEffect vanaf die React-raamwerk ingevoer het. Die eerste parameter om te gebruikEffect is 'n funksie. Wanneer hierdie funksie hanteerder uitgevoer word, sal dit sorg vir enige newe-effekte wat jy verskaf. Die funksie is 'n terugbelfunksie wat geroep word wanneer een van die React-komponent-lewensiklusgebeurtenisse plaasvind.
Wanneer om dit te gebruik?
Die useEffect-haak kan nuttig wees in 'n verskeidenheid situasies. Die volgende is die belangrikste:
- Ons kan hierdie parameter vanaf die kliënt se kant verander wanneer ons data wil haal, afhangende van 'n verskafde argument. Dit sal herroep word nadat die parameter met vars data opgedateer is.
- As ons data van 'n API-eindpunt wil ophaal en dit aan die kliëntkant vertoon. Wanneer ons komponent weergee, word die funksie of hanteerder wat aan die useEffect-haak gegee is, uitgevoer, en data in die komponenttoestande word herwin. Hierdie statusse word dan in gebruikerskoppelvlakkomponente gebruik.
- Wanneer jou komponent staatmaak op data van die buitewêreld en ons nie kan verseker dat data sal aankom nie, moet onsEffect gebruik (miskien is die bediener daar onder). Eerder as om probleme te gooi en te verhoed dat ander komponente vertoon word, plaas dit in die useEffect-haak.
Gebruik gevalle
As die komponent weer na die eerste lopie weergegee word, sal dit nie uitgevoer word nie.
Wanneer 'n komponent weergee of herbeeld, moet dit altyd uitgevoer word.
By verstek loop die program net een keer. Daarna, as die stutwaardes verander, hardloop:
Vir asinchroniese aktiwiteite, gebruik altyd useEffect.
useEffect-kodeblokke is ooglopende merkers van asynchrone take vir jou mede-ontwikkelaars. Dit is moontlik om asynchrone kode te skep sonder om useEffect te gebruik, maar dit is nie die "Reageer-metode" nie, en dit verhoog beide die kompleksiteit en die risiko van foute.
Die gebruik van useEffect in plaas daarvan om asinchrone kode te skryf wat die UI kan stop, is 'n bekende tegniek in die React-gemeenskap, veral die manier waarop die React-span dit gebou het om 'n newe-effek uit te voer.
Nog 'n voordeel van die gebruik daarvan is dat ontwikkelaars eenvoudig die kode kan hersien en onmiddellik kode kan opspoor wat "buite die beheervloei" uitgevoer word, wat eers na die eerste leweringsiklus belangrik word. Verder is die blokke geskik vir onttrekking in herbruikbare en selfs meer semantiese pasgemaakte Hakies.
N voorbeeld
Gebruik die useEffect-kode en verhoog 'n getal per sekonde.
Gevolgtrekking
Om die onderliggende ontwerpbeginsels en beste praktyke van die useEffect Hook te verstaan, is na my mening 'n kritieke vaardigheid om te leer as jy 'n React-ontwikkelaar op die volgende vlak wil word.
Om op te som, die useEffect Hook ontvang 'n funksie wat imperatiewe, potensieel effektiewe volledige logika insluit. Die afhanklikheidskikking, wat die tweede parameter is, kan gebruik word om die uitvoering te beïnvloed. Terwyl u dit hanteer, is dit ook nodig om skoonmaakkode te skryf deur die terugkeerfunksie te gebruik.
Laat weet ons in die kommentaar of die artikel nuttig was.
Lewer Kommentaar