Wann Dir e React Entwéckler sidd deen nach net iwwer React Hooks geléiert huet, ass elo de Moment. Dëse Post geet duerch d'useEffect React Hook am Detail. Et ass den Haken-Äquivalent vun engem Schwäizer Arméimesser. Et léist eng Vielfalt vun Themen, wéi wéi Dir Daten kritt wann e Komponent montéiert, wéi ee Code laaft wann e Staat oder e Prop ännert, wéi een Timer oder Intervalle opstellt, a sou weider.
E useEffect gëtt fir zimlech alles benotzt wat Dir wëllt "maachen" an engem React Komponent deen net JSX zréckkënnt (all Zort Nebenwirkung). Dir kënnt och e puer UseEffects pro Komponent hunn.
All dës Kraaft kënnt op Käschte: ausser Dir verstitt wéi et funktionnéiert, kann et perplex sinn. An dësem Post wäerte mir eng Vielfalt vu Beispiller kucken fir datt Dir de konzeptuellen Modell begräifen an en op Ären eegene Code gëlle kënnt.
Reakt Hooks - Wat probéiert et ze léisen?
Hooks goufen fir d'éischt a React Versioun 16.8 agefouert a ginn elo vu ville React Projete benotzt. Hooks iwwerwannt de Problem vun der Code Widderhuelung tëscht Komponenten. Si sinn ouni de Gebrauch vun Klassen geschriwwen. Dëst bedeit net datt React Klassen opginn; Haken sinn einfach eng alternativ Method.
React erlaabt Iech séier raffinéiert Komponenten mat statesch Logik ze kreéieren. Et ass schwéier dës Komponenten ze trennen well d'Klass op React Lifecycle Methoden hänkt. Dëst ass wou React Hooks erakommen.
Si erlaben Iech e Komponent a méi kleng Funktiounen opzedeelen. Amplaz de Code a méi kleng Stécker op Basis vu Lifecycle Methoden opzedeelen, kënnt Dir elo Code a méi kleng Eenheeten arrangéieren an trennen ofhängeg vun der Funktionalitéit.
Wat ass useEffect Hook?
Hooks si Funktiounen déi Iech erlaben Zougang zu Staat an aner Reaktiounsfäegkeeten ze kréien ouni ES6 Klassen ze schreiwen. D'React Hooks API huet en Hook genannt useEffect. Wann Dir mat reagéierten Liewenszyklen vertraut sidd, ass de UseEffect Hook d'selwecht wéi de componentDidMount, componentDidUpdate, an componentWillUnmount Liewenszyklus Methoden kombinéiert.
No der React Hooks Dokumentatioun gouf et erstallt fir e puer vun de Problemer mat ES6 Klass Komponent Liewenszyklus Methoden ze léisen.
Syntax
Dat éischt Argument ass eng Callback Funktioun, déi no all Rendering par défaut ausgefouert gëtt. Den zweeten Parameter ass eng optional Ofhängegkeetsarray déi den Hook instruéiert fir nëmmen zréckzeruffen wann den Zilstaat ännert.
Den Hook vergläicht all Ofhängegkeet historesch an aktuell Staaten. Wann déi zwee Wäerter net passen, rifft den Hook den Callback, deen am éischte Parameter spezifizéiert ass, op. Ofhängegkeetsarrays änneren dat üblech Callback Verhalen a garantéieren datt den Hook all aner Komponenten am Komponent Ëmfang ignoréiert.
Basis Benotzung
Fir e Message ze späicheren, benotzen ech React useState am Code Probe hei uewen. Duerno, huelen ech meng Message Staat Variabel an Drécken et um Écran. Wéi och ëmmer, ech wëll elo Effekt benotzen fir de Message eng Sekonn ze änneren nodeems de Komponent montéiert ass.
Ech hunn meng Effekt hannert der useState Linn agebaut nodeems ech useEffect aus dem React Kader importéiert hunn. Den éischte Parameter fir Effekt ze benotzen ass eng Funktioun. Wann dës Funktioun Handler ausgefouert gëtt, këmmert se sech ëm all Nebenwirkungen déi Dir ubitt. D'Funktioun ass eng Callback Funktioun déi genannt gëtt wann ee vun de React Komponent Lifecycle Eventer geschitt.
Wéini ze benotzen?
De UseEffect Hook kann a ville Situatiounen nëtzlech sinn. Déi folgend sinn déi wichtegst:
- Mir kënnen dëse Parameter vun der Client Säit änneren wa mir Donnéeë wëllen ofhuelen ofhängeg vun engem geliwwert Argument. Et gëtt erënnert nodeems de Parameter mat frëschen Donnéeën aktualiséiert gouf.
- Wa mir Daten vun engem API Endpunkt wëllen recuperéieren an se op der Client-Säit weisen. Wann eise Komponent rendert, gëtt d'Funktioun oder den Handler, deen dem useEffect Hook gegeben gëtt, ausgefouert, an d'Donnéeën an de Komponentstate ginn zréckgezunn. Dës Statuse ginn dann an User Interface Komponente benotzt.
- Wann Är Komponent op Daten aus der Äussewelt hänkt a mir kënnen net garantéieren datt d'Donnéeën ukommen, sollte mir Effekt benotzen (vläicht ass de Server do ënnen). Anstatt Probleemer ze werfen an ze verhënneren datt aner Komponenten ugewise ginn, placéiert se am useEffect Hook.
Fälschungen benotzen
Wann d'Komponente no der éischter Course nei rendéiert, gëtt se net ausgefouert.
Wann ëmmer e Komponent rendert oder nei rendert, sollt et ëmmer ausgefouert ginn.
Par défaut leeft de Programm nëmmen eemol. Duerno, wann d'Prop Wäerter änneren, lafen:
Fir asynchron Aktivitéiten, benotzt ëmmer useEffect.
useEffect Code Blocks sinn offensichtlech Markéierer vun asynchronen Jobs fir Är Matbierger Entwéckler. Et ass méiglech asynchrone Code ze kreéieren ouni useEffect ze benotzen, awer dëst ass net d'"React Method", an et erhéicht souwuel d'Komplexitéit wéi och de Risiko vu Feeler.
UseEffect benotzen anstatt asynchrone Code ze schreiwen deen d'UI stoppen kann ass eng bekannt Technik an der React Gemeinschaft, besonnesch de Wee wéi d'React Team et gebaut huet fir en Nebenwirkung auszeféieren.
En anere Virdeel fir et ze benotzen ass datt d'Entwéckler einfach de Code iwwerpréiwen an direkt Code detektéieren deen "ausserhalb vum Kontrollfloss" leeft, wat eréischt nom éischte Render-Zyklus wichteg gëtt. Ausserdeem sinn d'Blöcke gëeegent fir Extraktioun an wiederverwendbaren an nach méi semantesch personaliséiert Hooks.
E Beispill
Benotzt de useEffect Code, erhéicht eng Zuel pro Sekonn.
Konklusioun
D'Basisdaten Designprinzipien a beschten Praktiken vum UseEffect Hook ze verstoen, a menger Meenung no, ass eng kritesch Fäegkeet fir ze léieren wann Dir en nächsten Niveau React Entwéckler wëllt ginn.
Zesummefaassend, de useEffect Hook kritt eng Funktioun déi imperativ enthält, potenziell Effekt voll Logik. D'Ofhängegkeetsarray, wat den zweete Parameter ass, ka benotzt ginn fir d'Ausféierung ze beaflossen. Beim Ëmgang mat deem ass et och noutwendeg fir Botzcode mat der Retourfunktioun ze schreiwen.
Loosst eis an de Kommentaren wëssen ob den Artikel hëllefräich war.
Hannerlooss eng Äntwert