Эгер сиз React илгичтери жөнүндө үйрөнө элек React иштеп чыгуучусу болсоңуз, азыр учур. Бул пост useEffect React Hook аркылуу майда-чүйдөсүнө чейин өтөт. Бул швейцариялык армиянын бычагынын илгичине барабар. Ал ар кандай маселелерди чечет, мисалы, компонент орнотулганда маалыматтарды кантип алуу, абал же таяныч өзгөргөндө кодду кантип иштетүү, таймерлерди же интервалдарды кантип орнотуу жана башкалар.
UseEffect сиз JSX (терс эффекттердин ар кандай түрү) кайтарып бербеген React компонентинде "кылгыңыз" келген дээрлик бардык нерсе үчүн колдонулат. Ошондой эле бир компонентке бир нече useEffects болушу мүмкүн.
Бул күчтүн бардыгы кымбатка турат: анын кантип иштээрин түшүнбөсөңүз, анда ал таң калыштуу болушу мүмкүн. Бул постто биз концептуалдык моделди түшүнүп, аны өзүңүздүн кодуңузга колдонуу үчүн ар кандай мисалдарды карап чыгабыз.
React Hooks – Эмнени чечүүгө аракет кылып жатат?
Илгичтер биринчи жолу React 16.8 версиясында киргизилген жана азыр көптөгөн React долбоорлорунда колдонулат. Hooks компоненттердин ортосундагы кодду кайталоо маселесин жеңет. Алар класстарды колдонбостон жазылган. Бул React класстардан баш тартып жатканын билдирбейт; илгичтер жөн гана альтернатива ыкмасы болуп саналат.
React сизге логикага ээ болгон татаал компоненттерди тез түзүүгө мүмкүндүк берет. Бул компоненттерди бөлүү кыйын, анткени класс React Lifecycle Методдоруна таянат. Бул жерде React Hooks кирет.
Алар бир компонентти кичине функцияларга бөлүүгө мүмкүндүк берет. Кодду Lifecycle методдорунун негизинде майда бөлүктөргө бөлүүнүн ордуна, сиз эми функцияга жараша кодду кичине бирдиктерге бөлүп, иреттесеңиз болот.
UseEffect Hook деген эмне?
Илгичтер - бул ES6 класстарын жазбастан эле абалга жана башка реакция мүмкүнчүлүктөрүнө кирүүгө мүмкүндүк берүүчү функциялар. React hooks API'де useEffect деп аталган илгич бар. Эгер сиз реактивдүү жашоо циклдери менен тааныш болсоңуз, useEffect илгич менен бирдей. komponentDidMount, komponentDidUpdate, жана komponentWillUnmount жашоо циклинин ыкмалары айкалышкан.
React Hooks документтерине ылайык, ал ES6 классынын компонентинин жашоо циклинин ыкмалары менен айрым маселелерди чечүү үчүн түзүлгөн.
синтаксиси
Биринчи аргумент ар бир көрсөтүүдөн кийин демейки боюнча аткарылуучу кайра чалуу функциясы болуп саналат. Экинчи параметр - бул максаттуу абал өзгөргөндө гана Hook-ка кайра чалууну буйруган кошумча Көз карандылык массиви.
Hook ар бир көз карандылыктын тарыхый жана азыркы абалын салыштырат. Эгерде эки маани дал келбесе, Hook биринчи параметрде көрсөтүлгөн кайра чалууну чакырат. Көз карандылык массивдери кадимки кайра чалуу жүрүм-турумун өзгөртөт жана Hook компоненттин чөйрөсүндөгү бардык башка компоненттерди этибарга албай тургандыгына кепилдик берет.
Негизги колдонуу
Кабарды сактоо үчүн, мен жогорудагы код үлгүсүндө React useState колдонуп жатам. Андан кийин мен кабарымдын абалынын өзгөрмөсүн алып, аны экранга чыгарам. Бирок, мен азыр компонент орнотулгандан бир секунддан кийин билдирүүнү өзгөртүү үчүн Effect колдонгум келет.
React алкагынан useEffect импорттоодон кийин мен эффектимди useState сызыгынын артына киргиздим. UseEffect үчүн биринчи параметр бул функция. Бул функция иштеткич аткарылганда, ал сиз берген бардык терс таасирлерге кам көрөт. Функция React компонентинин жашоо циклинин окуяларынын бири пайда болгондо чакырылган кайра чалуу функциясы.
Качан колдонуу керек?
UseEffect илгичи ар кандай кырдаалдарда пайдалуу болушу мүмкүн. Төмөнкүлөр эң маанилүү болуп саналат:
- Берилген аргументке жараша маалыматтарды алуу үчүн биз бул параметрди кардар тараптан өзгөртө алабыз. Параметр жаңы маалыматтар менен жаңыртылгандан кийин кайра чакыртып алынат.
- Эгер биз API акыркы чекитинен маалыматтарды алып, аны кардар тарабында көрсөткүбүз келсе. Биздин компонент көрсөткөндө useEffect илгичине берилген функция же иштеткич аткарылып, компоненттин абалындагы маалыматтар чыгарылат. Бул статустар андан кийин колдонуучу интерфейсинин компоненттеринде колдонулат.
- Компонентиңиз тышкы дүйнөдөгү маалыматтарга таянып, биз маалыматтардын келишине кепилдик бере албасак, биз Effect колдонушубуз керек (балким сервер ал жерде болушу мүмкүн). Көйгөйлөрдү жаратуунун жана башка компоненттердин көрсөтүлүшүнө жол бербөөнүн ордуна, аларды useEffect илгичине салыңыз.
колдонуу учурлары
Эгерде компонент биринчи иштетилгенден кийин кайра көрсөтүлсө, ал аткарылбайт.
Компонент рендерингде же кайра көрсөтүүдө, ал ар дайым аткарылышы керек.
Демейки боюнча, программа бир гана жолу иштейт. Андан кийин, эгерде таяныч баалуулуктары өзгөрсө, иштетиңиз:
Асинхрондук аракеттер үчүн дайыма useEffect колдонуңуз.
useEffect код блоктору сиздин кесиптештериңиздин иштеп чыгуучулары үчүн асинхрондук жумуштардын ачык маркерлери. UseEffect колдонбостон асинхрондук кодду түзсө болот, бирок бул “React методу” эмес жана каталардын татаалдыгын да, коркунучун да жогорулатат.
UIди токтотушу мүмкүн болгон асинхрондук кодду жазуунун ордуна useEffectди колдонуу - бул React коомчулугунда белгилүү ыкма, айрыкча React командасы аны терс эффектти аткаруу үчүн курган ыкмасы.
Аны колдонуунун дагы бир артыкчылыгы - иштеп чыгуучулар жөн гана кодду карап чыгып, "башкаруу агымынан тышкары" иштетилген кодду дароо аныктай алышат, бул биринчи рендердик циклден кийин гана маанилүү болуп калат. Мындан тышкары, блоктор кайра колдонулуучу жана андан да көп семантикалык ыңгайлаштырылган илгичтерге чыгаруу үчүн ылайыктуу.
мисалы
UseEffect кодун колдонуп, секундасына бир санды көбөйтүңүз.
жыйынтыктоо
UseEffect Hookтин негизги дизайн принциптерин жана мыкты тажрыйбаларын түшүнүү, менин оюмча, кийинки деңгээлдеги React иштеп чыгуучусу болууну кааласаңыз, үйрөнүү үчүн өтө маанилүү жөндөм.
Жыйынтыктап айтканда, useEffect Hook императивди камтыган функцияны алат, толук логиканы таасир этет. Экинчи параметр болгон көз карандылык массивинин аткарылышына таасир этиш үчүн колдонулушу мүмкүн. Аны менен күрөшүүдө, кайра кайтаруу функциясын колдонуп тазалоо кодун жазуу керек.
Макала пайдалуу болсо, комментарийлерде бизге айтыңыз.
Таштап Жооп