Sut mae gostyngwyr yn gweithio yn React?
Mae React yn llyfrgell JavaScript boblogaidd a ddefnyddir i adeiladu rhyngwynebau defnyddwyr. Mae'n dilyn pensaernïaeth sy'n seiliedig ar gydrannau sy'n caniatáu i ddatblygwyr greu elfennau UI y gellir eu hailddefnyddio. Un o'r cysyniadau allweddol yn React yw defnyddio gostyngwyr.
Mae gostyngwyr yn rhan annatod o system rheoli gwladwriaeth React. Maent yn darparu ffordd ragweladwy o ddiweddaru a rheoli cyflwr cydran. Yn yr erthygl hon, byddwn yn plymio'n ddwfn i sut mae gostyngwyr yn gweithio yn React, eu pwrpas, a sut maen nhw'n cael eu gweithredu.
Deall cyflwr yn React
Cyn i ni ymchwilio i leihauwyr, gadewch i ni ddeall yn gyntaf y cysyniad o gyflwr yn React. Mae cyflwr yn cynrychioli'r data y mae cydran yn ei gadw a'i reoli'n fewnol. Mae'n pennu sut mae'r gydran yn ymddwyn ac yn rendrad mewn ymateb i weithredoedd defnyddwyr.
Yn React, dim ond o fewn y gydran sy'n berchen arno y gellir addasu cyflwr yn uniongyrchol. Gall cydrannau eraill ddarllen y cyflwr trwy bropiau, ond ni allant ei addasu'n uniongyrchol. Mae hyn yn sicrhau bod y cyflwr yn parhau i fod wedi'i grynhoi o fewn y gydran, gan hyrwyddo ailddefnyddadwyedd a chadw llif data'r rhaglen dan reolaeth.
Yr angen am reducers
Wrth i gymhwysiad dyfu mewn cymhlethdod, mae rheoli cyflwr yn dod yn fwy heriol. Efallai y bydd angen i gydrannau lluosog rannu a diweddaru'r un cyflwr. Mae egwyddorion llif data un ffordd ac ansymudedd React yn darparu ateb cain i'r broblem hon.
Mae gostyngwyr yn dod i chwarae i reoli diweddariadau cyflwr mewn modd rheoledig a rhagweladwy. Maent yn trin y rhesymeg diweddaru ac yn crynhoi'r addasiadau cyflwr o fewn un ffwythiant. Mae gostyngwyr yn cymryd y cyflwr presennol a gweithred fel mewnbwn ac yn dychwelyd cyflwr newydd yn seiliedig ar y camau gweithredu.
Gweithredu lleihäwr
I weithredu lleihäwr yn React, rydym fel arfer yn defnyddio'r bachyn `useReducer`. Mae'r bachyn `useReducer` yn derbyn swyddogaeth lleihäwr a gwerth cyflwr cychwynnol. Yna mae'n dychwelyd y cyflwr presennol a swyddogaeth anfon a ddefnyddir i sbarduno diweddariadau cyflwr.
Dyma enghraifft syml o gydran cownter sy'n defnyddio lleihäwr i reoli ei gyflwr:
```jsx
mewnforio React, { useReducer } o ''react'';
gwrth-Reducer ffwythiant (cyflwr, gweithred) {
switsh (action.type) {
achos ''cynyddiad'':
dychwelyd { count: state.count + 1};
achos ''gostyngiad'':
dychwelyd { count: state.count - 1};
rhagosodedig:
taflu Gwall newydd ('' Math o weithred heb ei gefnogi'');
}
}
Swyddogaeth cownter() {
const [nodwch, anfon] {{0}} useReducer(counterReducer, { count: 0 });
dychwelyd (
Cyfrif: {state.count}
);
}
```
Yn yr enghraifft hon, rydym yn diffinio swyddogaeth `counterReducer` sy'n cymryd y cyflwr presennol a gweithred fel paramedrau. Y tu mewn i'r lleihäwr, rydym yn defnyddio datganiad `switsh` i drin gwahanol fathau o gamau gweithredu, megis "cynnydd" a "gostyngiad". Mae pob math o weithred yn cyfateb i resymeg diweddaru cyflwr penodol.
Anfon gweithredoedd
Er mwyn sbarduno diweddariadau cyflwr mewn lleihäwr, rydym yn anfon camau gweithredu. Mae gweithred yn wrthrych sy'n disgrifio'r math o ddiweddariad yr ydym am ei berfformio. Yn yr enghraifft uchod, rydym yn anfon gweithredoedd gyda `{ type:''increment'' }` a `{ math: ''gostyngiad'' }` pan fydd y botymau priodol yn cael eu clicio.
Pan fydd gweithred yn cael ei hanfon, mae React yn galw ar y swyddogaeth lleihäwr gyda'r cyflwr presennol a'r gwrthrych gweithredu. Mae'r lleihäwr yn prosesu'r weithred ac yn dychwelyd y cyflwr wedi'i ddiweddaru. Yna mae Adwaith yn ail-wneud y gydran gyda'r cyflwr newydd.
Manteision defnyddio reducers
Mae gostyngwyr yn cynnig sawl budd wrth reoli cyflwr yn React:
1. Diweddariadau cyflwr rhagweladwy: Mae gostyngwyr yn darparu lleoliad clir a chanolog ar gyfer addasiadau cyflwr. Trwy grynhoi'r rhesymeg diweddaru cyflwr mewn swyddogaeth lleihäwr, mae'n dod yn haws i'w ddeall a rhesymu am y newidiadau sy'n digwydd yn y gydran.
2. Cod y gellir ei gynnal a'i ailddefnyddio: Gyda gostyngwyr, mae rheolaeth y wladwriaeth yn dod yn fwy trefnus a modiwlaidd. Gellir ailddefnyddio gostyngwyr ar draws cydrannau, gan hyrwyddo ailddefnyddio cod a lleihau dyblygu.
3. Dadfygio teithio amser: Mae gostyngwyr yn galluogi dadfygio teithio amser, nodwedd bwerus sy'n caniatáu i ddatblygwyr ailchwarae gweithredoedd y gorffennol ac archwilio'r cyflwr ar unrhyw adeg. Mae hyn yn gwneud dadfygio yn haws ac yn fwy effeithlon.
4. Gwahanu pryderon yn well: Mae gostyngwyr yn gwahanu pryderon rheolaeth y wladwriaeth o'r haen gyflwyno. Mae hyn yn helpu i gynnal gwahaniad clir rhwng cydrannau UI a rhesymeg rheoli'r wladwriaeth, gan arwain at well trefniadaeth cod a chynaladwyedd.
Patrymau cyffredin gyda lleihäwyr
Er bod y defnydd sylfaenol o ostyngiadau yn cynnwys trin diweddariadau cyflwr syml, gellir eu defnyddio ar gyfer senarios mwy cymhleth gyda phatrymau ychwanegol:
1. Camau cysoni: Gall gostyngwyr drin gweithredoedd asyncronaidd, megis gwneud ceisiadau API, trwy gyflwyno mathau ychwanegol o gamau gweithredu a defnyddio nwyddau canol fel Redux Thunk neu Redux Saga. Mae hyn yn caniatáu ar gyfer diweddariadau cyflwr mwy cymhleth, megis nôl data o weinydd a diweddaru'r UI yn unol â hynny.
2. Cyfuno reducers: Mewn cymwysiadau mwy, mae'n gyffredin cael reducers lluosog sy'n rheoli gwahanol rannau o'r wladwriaeth. Mae React yn darparu cyfleustodau `combineReducers` i gyfuno'r gostyngwyr hyn yn un lleihäwr gwraidd.
3. Integreiddiad API Cyd-destun: Gellir defnyddio API Cyd-destun React ar y cyd â gostyngwyr i ddarparu rheolaeth wladwriaeth fyd-eang. Trwy lapio'r rhaglen gyda darparwr cyd-destun a defnyddio lleihäwr ar gyfer diweddariadau cyflwr, gallwch greu datrysiad rheoli cyflwr canolog y gellir ei gyrchu gan bob cydran.
Casgliad
Mae reducers yn arf pwerus yn React ar gyfer rheoli a diweddaru cyflwr cydrannau. Trwy amgįu addasiadau cyflwr o fewn un swyddogaeth, mae gostyngwyr yn darparu ffordd ragweladwy a chynaladwy i drin diweddariadau cyflwr.
Gyda'r defnydd o leihauwyr a'r bachyn `useReducer`, gall datblygwyr greu cydrannau y gellir eu hailddefnyddio a modiwlaidd tra'n cynnal gwahaniad clir rhwng pryderon. Trwy ddeall sut mae gostyngwyr yn gweithio a'u buddion, gallwch eu trosoledd yn effeithiol yn eich cymwysiadau React i adeiladu rhyngwynebau defnyddiwr graddadwy a chynaladwy.
