Եթե դուք React-ի ծրագրավորող եք, ով դեռ չի իմացել React կեռիկների մասին, ապա հիմա ճիշտ պահն է: Այս գրառումը մանրամասն կանցնի useEffect React Hook-ի միջոցով: Դա շվեյցարական բանակային դանակի կեռիկի համարժեքն է: Այն լուծում է մի շարք խնդիրներ, օրինակ՝ ինչպես ստանալ տվյալներ, երբ բաղադրիչը տեղադրվում է, ինչպես գործարկել կոդը, երբ փոխվում է վիճակը կամ հենակետը, ինչպես կարգավորել ժամանակաչափերը կամ ընդմիջումները և այլն:
UseEffect-ն օգտագործվում է գրեթե այն ամենի համար, ինչ դուք ցանկանում եք «անել» React բաղադրիչում, որը չի վերադարձնում JSX (ցանկացած տեսակի կողմնակի ազդեցություն): Դուք կարող եք նաև ունենալ մի քանի useEffects մեկ բաղադրիչի համար:
Այս ամբողջ ուժը իր գնով է. քանի դեռ չեք հասկանում, թե ինչպես է այն աշխատում, դա կարող է տարակուսելի լինել: Այս գրառման մեջ մենք կդիտարկենք մի շարք օրինակներ, որպեսզի կարողանաք հասկանալ հայեցակարգային մոդելը և կիրառել այն ձեր սեփական կոդի վրա:
Արձագանքել կեռիկներ -Ի՞նչ է այն փորձում լուծել:
Կեռիկներն առաջին անգամ ներկայացվել են React 16.8 տարբերակում և այժմ օգտագործվում են բազմաթիվ React նախագծերի կողմից: Hooks-ը հաղթահարում է բաղադրիչների միջև կոդի կրկնության խնդիրը։ Դրանք գրված են առանց դասերի օգտագործման։ Սա չի նշանակում, որ React-ը թողնում է դասերը. Կեռիկներն ուղղակի այլընտրանքային մեթոդ են:
React-ը թույլ է տալիս արագորեն ստեղծել բարդ բաղադրիչներ՝ պետական տրամաբանությամբ: Դժվար է առանձնացնել այս բաղադրիչները, քանի որ դասը հիմնված է React Lifecycle Methods-ի վրա: Այստեղ է մտնում React Hooks-ը:
Նրանք թույլ են տալիս բաղադրիչը բաժանել ավելի փոքր գործառույթների: Կոդը ավելի փոքր մասերի բաժանելու փոխարեն՝ հիմնվելով Կյանքի ցիկլի մեթոդների վրա, այժմ կարող եք դասավորել և բաժանել կոդը փոքր միավորների՝ կախված ֆունկցիոնալությունից:
Ի՞նչ է useEffect Hook-ը:
Կեռիկներն այն գործառույթներն են, որոնք թույլ են տալիս մուտք գործել վիճակի և այլ արձագանքման հնարավորություններ՝ առանց ES6 դասեր գրելու: React hooks API-ն ունի կեռիկ, որը կոչվում է useEffect: Եթե դուք ծանոթ եք ռեակտի կյանքի ցիկլերին, ապա useEffect կեռիկը նույնն է, ինչ componentDidMount, componentDidUpdate, եւ բաղադրիչը Unmount կյանքի ցիկլի մեթոդները համակցված.
Համաձայն React Hooks-ի փաստաթղթերի՝ այն ստեղծվել է ES6 դասի բաղադրիչի կյանքի ցիկլի մեթոդների հետ կապված որոշ խնդիրներ լուծելու համար։
շարահյուսություն
Առաջին արգումենտը հետադարձ կապի ֆունկցիան է, որն իրականացվում է լռելյայնորեն յուրաքանչյուր արտապատկերումից հետո։ Երկրորդ պարամետրը կամընտիր կախվածության զանգված է, որը հրահանգում է Hook-ին հետ կանչել միայն այն դեպքում, եթե թիրախային վիճակը փոխվի:
The Hook-ը համեմատում է յուրաքանչյուր կախվածության պատմական և ներկա վիճակները: Եթե երկու արժեքները չեն համընկնում, Hook-ը կանչում է առաջին պարամետրում նշված հետ կանչը: Կախվածության զանգվածները փոխում են հետադարձ զանգի սովորական պահվածքը և երաշխավորում, որ Hook-ը անտեսում է բաղադրիչի շրջանակի բոլոր մյուս բաղադրիչները:
Հիմնական օգտագործումը
Հաղորդագրություն պահելու համար ես օգտագործում եմ React useState-ը վերևի կոդի նմուշում: Դրանից հետո ես վերցնում եմ իմ հաղորդագրության վիճակի փոփոխականը և տպում այն էկրանին։ Այնուամենայնիվ, ես այժմ ուզում եմ օգտագործել Effect-ը, որպեսզի փոփոխեմ հաղորդագրությունը բաղադրիչը տեղադրվելուց վայրկյան հետո:
Ես իմ էֆեկտը տեղադրել եմ useState տողի հետևում React շրջանակից useEffect ներմուծելուց հետո: Էֆեկտ օգտագործելու առաջին պարամետրը ֆունկցիա է: Երբ այս գործառույթի մշակիչը գործարկվի, այն հոգ կտանի ձեր տրամադրած ցանկացած կողմնակի ազդեցությունների մասին: Ֆունկցիան հետ կանչի ֆունկցիա է, որը կանչվում է, երբ տեղի է ունենում React բաղադրիչի կյանքի ցիկլի իրադարձություններից մեկը:
Երբ օգտագործել այն:
UseEffect կեռիկը կարող է օգտակար լինել տարբեր իրավիճակներում: Հետևյալներն ամենակարևորն են.
- Մենք կարող ենք փոխել այս պարամետրը հաճախորդի կողմից, երբ ցանկանում ենք ստանալ տվյալներ՝ կախված մատակարարված արգումենտից: Այն կկանչի այն բանից հետո, երբ պարամետրը թարմացվի թարմ տվյալներով:
- Եթե մենք ցանկանում ենք ստանալ տվյալներ API-ի վերջնակետից և ցուցադրել դրանք հաճախորդի կողմից: Երբ մեր բաղադրիչը մատուցվում է, գործարկվում է useEffect hook-ին տրված գործառույթը կամ մշակողը, և բաղադրիչի վիճակներում տվյալները վերցվում են: Այս կարգավիճակներն այնուհետև օգտագործվում են օգտագործողի միջերեսի բաղադրիչներում:
- Երբ ձեր բաղադրիչը հենվում է արտաքին աշխարհի տվյալների վրա, և մենք չենք կարող համոզվել, որ տվյալները կժամանեն, մենք պետք է օգտագործենք «Effect»-ը (գուցե սերվերը գտնվում է այնտեղ): Խնդիրներ նետելու և այլ բաղադրիչների ցուցադրումը կանխելու փոխարեն, դրանք տեղադրեք useEffect կեռիկի մեջ:
Օգտագործեք դեպքեր
Եթե բաղադրիչը վերարտադրվի առաջին գործարկումից հետո, այն չի գործարկվի:
Ամեն անգամ, երբ բաղադրիչը ցուցադրվում է կամ վերաարտադրվում է, այն միշտ պետք է կատարվի:
Լռելյայնորեն, ծրագիրը աշխատում է միայն մեկ անգամ: Այնուհետև, եթե հենակետային արժեքները փոխվեն, գործարկեք.
Ասինխրոն գործողությունների համար միշտ օգտագործեք useEffect-ը:
useEffect կոդի բլոկները ձեր գործընկեր ծրագրավորողների համար ասինխրոն աշխատանքների ակնհայտ նշիչներ են: Հնարավոր է ստեղծել ասինխրոն կոդ՝ առանց useEffect-ի օգտագործման, բայց սա «React մեթոդը» չէ, և այն մեծացնում է ինչպես բարդությունը, այնպես էլ սխալների վտանգը։
UseEffect-ի օգտագործումը՝ ասինխրոն կոդ գրելու փոխարեն, որը կարող է դադարեցնել UI-ը, հայտնի տեխնիկա է React համայնքում, հատկապես այն ձևով, թե ինչպես է React թիմը ստեղծել այն՝ կողմնակի ազդեցություն գործելու համար:
Դրա օգտագործման մեկ այլ առավելությունն այն է, որ մշակողները կարող են պարզապես վերանայել կոդը և անմիջապես հայտնաբերել ծածկագիրը, որը գործարկվում է «վերահսկիչ հոսքից դուրս», որը կարևոր է դառնում միայն առաջին արտապատկերման ցիկլից հետո: Ավելին, բլոկները հարմար են բազմակի օգտագործման և նույնիսկ ավելի իմաստային մաքսային կեռիկներ հանելու համար:
Օրինակ
Օգտագործելով useEffect կոդը, ավելացրեք մի թիվ մեկ վայրկյանում:
Եզրափակում
UseEffect Hook-ի հիմքում ընկած նախագծման սկզբունքները և լավագույն փորձը հասկանալը, իմ կարծիքով, կարևոր հմտություն է սովորելու համար, եթե ցանկանում եք դառնալ հաջորդ մակարդակի React ծրագրավորող:
Ամփոփելու համար, useEffect Hook-ը ստանում է ֆունկցիա, որը ներառում է հրամայական, պոտենցիալ ազդեցության ամբողջական տրամաբանություն: Կախվածության զանգվածը, որը երկրորդ պարամետրն է, կարող է օգտագործվել կատարման վրա ազդելու համար։ Դրանով զբաղվելիս անհրաժեշտ է նաև գրել մաքրման կոդ՝ օգտագործելով վերադարձ ֆունկցիան։
Տեղեկացրեք մեզ մեկնաբանություններում, եթե հոդվածը օգտակար էր:
Թողնել գրառում