Yog tias koj yog tus tsim tawm React uas tseem tsis tau kawm txog React hooks, tam sim no yog lub sijhawm. Cov ncej no yuav dhau los ntawm useEffect React Hook kom ntxaws. Nws yog tus nuv sib npaug ntawm Swiss Army riam. Nws daws tau ntau yam teeb meem, xws li yuav ua li cas kom tau txais cov ntaub ntawv thaum cov khoom sib txuas, yuav ua li cas khiav code thaum lub xeev lossis lub prop hloov, yuav teeb tsa lub sijhawm lossis ncua sijhawm, thiab lwm yam.
Ib qho useEffect yog siv rau txhua yam uas koj xav tau "ua" hauv React tivthaiv uas tsis rov qab los JSX (txhua yam kev mob tshwm sim). Koj kuj tseem tuaj yeem muaj ob peb useEffects ib feem.
Tag nrho cov hwj chim no los ntawm tus nqi: tshwj tsis yog koj nkag siab tias nws ua haujlwm li cas, nws yuav ua rau muaj kev ntxhov siab. Hauv cov ntawv tshaj tawm no, peb yuav saib ntau yam piv txwv kom koj tuaj yeem tuav lub tswv yim qauv thiab siv rau koj tus kheej cov cai.
React Hooks – Dab tsi yog nws sim daws?
Hooks tau tshaj tawm thawj zaug hauv React version 16.8 thiab tam sim no tau siv los ntawm ntau qhov haujlwm React. Hooks overcomes qhov teeb meem ntawm code repetition ntawm cov khoom. Lawv sau tsis siv cov chav kawm. Qhov no tsis txhais hais tias React yog tso tseg cov chav kawm; hooks tsuas yog ib txoj hauv kev.
React tso cai rau koj los tsim cov khoom sib xyaw ua ke sai sai nrog cov laj thawj zoo. Nws yog ib qho nyuaj rau cais cov khoom no vim cov chav kawm tso siab rau React Lifecycle Methods. Nov yog qhov twg React Hooks tuaj rau hauv.
Lawv tso cai rau koj faib ib feem ua haujlwm me me. Hloov chaw ntawm kev faib cov lej rau hauv cov ntawv me me raws li Lifecycle txoj kev, tam sim no koj tuaj yeem npaj thiab cais cov lej rau hauv me me nyob ntawm kev ua haujlwm.
UseEffect Hook yog dab tsi?
Hooks yog cov haujlwm uas tso cai rau koj nkag mus rau lub xeev thiab lwm yam kev muaj peev xwm ua haujlwm yam tsis tas yuav sau cov chav kawm ES6. Lub react hooks API muaj ib tug nuv hu ua useEffect. Yog tias koj paub txog cov kev ua neej nyob hauv lub neej, qhov siv Effect nuv yog tib yam li tivthaivDidMount, componentDidUpdate, Thiab componentWillUnmount lub neej voj voog txoj kev ua ke.
Raws li cov ntaub ntawv React Hooks, nws tau tsim los daws qee qhov teeb meem nrog ES6 chav kawm cov txheej txheem kev ua neej nyob.
syntax
Thawj qhov kev sib cav yog kev hu rov qab ua haujlwm, uas yog ua tiav los ntawm lub neej ntawd tom qab txhua qhov ua tiav. Qhov thib ob parameter yog ib qho kev xaiv Dependency array uas qhia tus Hook kom hu rov qab tsuas yog tias lub hom phiaj lub xeev hloov.
Lub Hook piv rau txhua qhov kev vam khom keeb kwm thiab lub xeev tam sim no. Yog hais tias ob qhov tseem ceeb tsis sib xws, Hook invokes callback teev nyob rau hauv thawj parameter. Dependency arrays hloov tus cwj pwm hu rov qab li qub thiab lav tias Hook tsis quav ntsej tag nrho lwm cov khoom hauv cov khoom siv.
Kev siv yooj yim
Txhawm rau txuag cov lus, Kuv tab tom siv React useState hauv tus lej qauv saum toj no. Tom qab ntawd, kuv coj kuv cov lus hauv xeev hloov pauv thiab luam tawm ntawm qhov screen. Txawm li cas los xij, tam sim no kuv xav sivEffect los hloov cov lus thib ob tom qab cov khoom tau teeb tsa.
Kuv tau tso kuv cov nyhuv tom qab useState kab tom qab importing useEffect los ntawm React moj khaum. Thawj qhov parameter sivEffect yog kev ua haujlwm. Thaum tus tuav haujlwm no raug tua, nws yuav saib xyuas cov kev mob tshwm sim uas koj muab. Qhov kev ua haujlwm yog ib qho kev hu rov qab uas yog hu ua thaum ib qho ntawm React tivthaiv lub neej tshwm sim tshwm sim.
Thaum twg siv nws?
Tus useEffect nuv yuav pab tau ntau yam xwm txheej. Cov hauv qab no yog qhov tseem ceeb tshaj plaws:
- Peb tuaj yeem hloov qhov ntsuas no los ntawm tus neeg siv khoom sab nraud thaum peb xav nqa cov ntaub ntawv nyob ntawm qhov kev sib cav muab. Nws yuav rov qab tau tom qab qhov parameter tau hloov kho nrog cov ntaub ntawv tshiab.
- Yog tias peb xav khaws cov ntaub ntawv los ntawm API qhov kawg thiab muab tso rau ntawm tus neeg siv khoom. Thaum peb cov khoom pov thawj ua tiav, cov haujlwm lossis tus neeg tuav haujlwm tau muab rau tus useEffect nuv yog raug tua, thiab cov ntaub ntawv nyob rau hauv lub xeev tivthaiv yog retrieved. Cov xwm txheej no yog tom qab ntawd ua haujlwm hauv cov neeg siv khoom siv interface.
- Thaum koj cov khoom tso siab rau cov ntaub ntawv los ntawm lub ntiaj teb sab nraud thiab peb tsis tuaj yeem paub tseeb tias cov ntaub ntawv yuav tuaj txog, peb yuav tsum sivEffect (tej zaum tus neeg rau zaub mov nyob ntawd). Tsis yog cuam tshuam cov teeb meem thiab tiv thaiv lwm yam khoom los ntawm kev tshwm sim, muab tso rau hauv useEffect nuv.
Siv cov rooj plaub
Yog tias cov khoom siv rov ua dua tom qab thawj zaug, nws yuav tsis ua haujlwm.
Thaum twg ib qho khoom siv ua haujlwm lossis rov ua dua, nws yuav tsum tau ua txhua zaus.
Los ntawm lub neej ntawd, qhov kev zov me nyuam tsuas yog khiav ib zaug. Tom qab ntawd, yog tias tus nqi hloov pauv, khiav:
Rau cov dej num asynchronous, ib txwm siv useEffect.
useEffect code blocks yog cov cim pom tseeb ntawm cov haujlwm asynchronous rau koj tus khub tsim tawm. Nws muaj peev xwm los tsim asynchronous code yam tsis tau siv useEffect, tab sis qhov no tsis yog "React method," thiab nws ua rau muaj kev nyuaj siab thiab pheej hmoo ua yuam kev.
Siv useEffect es tsis txhob sau asynchronous code uas tuaj yeem nres UI yog cov txheej txheem paub zoo hauv React zej zog, tshwj xeeb tshaj yog txoj hauv kev pab pawg React tau tsim kom muaj kev cuam tshuam.
Lwm qhov zoo ntawm kev siv nws yog tias cov neeg tsim khoom tuaj yeem tshuaj xyuas cov cai tam sim ntawd thiab tshawb xyuas cov lej uas tau khiav "sab nraum qhov kev tswj hwm," uas dhau los ua qhov tseem ceeb tsuas yog tom qab thawj lub voj voog ua haujlwm. Tsis tas li ntawd, cov blocks tsim nyog rau kev rho tawm mus rau hauv reusable thiab txawm ntau semantic kev cai Hooks.
Ib qho piv txwv
Siv cov code useEffect, nce tus lej ib ob.
xaus
Kev nkag siab txog cov qauv tsim qauv thiab cov kev coj ua zoo tshaj plaws ntawm useEffect Hook, hauv kuv qhov kev xav, yog ib qho kev txawj ntse uas yuav tsum tau kawm yog tias koj xav los ua tus tsim tawm React tom ntej.
Txhawm rau xaus, useEffect Hook tau txais kev ua haujlwm uas suav nrog qhov tseem ceeb, muaj peev xwm cuam tshuam tag nrho cov laj thawj. Lub dependence array, uas yog qhov thib ob parameter, tuaj yeem siv los cuam tshuam rau kev ua tiav. Thaum ua haujlwm nrog nws, nws tseem yuav tsum tau sau cov lej tu siv qhov rov qab ua haujlwm.
Qhia rau peb paub hauv cov lus yog tias tsab xov xwm muaj txiaj ntsig.
Sau ntawv cia Ncua