Егер сіз React ілмектері туралы әлі білмеген React әзірлеушісі болсаңыз, дәл қазір. Бұл пост useEffect React Hook арқылы егжей-тегжейлі қарастырылады. Бұл швейцариялық армия пышағына ұқсайтын ілмек. Ол әртүрлі мәселелерді шешеді, мысалы, құрамдас орнатылған кезде деректерді алу, күй немесе тірек өзгерген кезде кодты қалай іске қосу, таймерлерді немесе аралықтарды орнату және т.б.
UseEffect JSX қайтармайтын React құрамдас бөлігінде «істегіңіз» келетін барлық нәрсе үшін қолданылады (жанама әсерлердің кез келген түрі). Сондай-ақ әр құрамдас үшін бірнеше useEffects болуы мүмкін.
Бұл қуаттың бәрі қымбатқа түседі: оның қалай жұмыс істейтінін түсінбесеңіз, ол сізді таң қалдыруы мүмкін. Бұл постта біз әртүрлі мысалдарды қарастырамыз, осылайша сіз концептуалды үлгіні түсініп, оны өзіңіздің кодыңызға қолдана аласыз.
Ілгектерге реакция жасаңыз – Ол нені шешуге тырысады?
Ілмектер алғаш рет React 16.8 нұсқасында енгізілді және қазір көптеген React жобаларында қолданылады. Hooks компоненттер арасындағы кодты қайталау мәселесін жеңеді. Олар сабақтарды қолданбай жазылған. Бұл React сыныптардан бас тартады дегенді білдірмейді; ілгектер жай ғана балама әдіс болып табылады.
React күй логикасы бар күрделі құрамдастарды жылдам жасауға мүмкіндік береді. Бұл компоненттерді бөлу қиын, өйткені сынып React Lifecycle Methods негізінде жұмыс істейді. Бұл жерде React Hooks кіреді.
Олар компонентті кішірек функцияларға бөлуге мүмкіндік береді. Lifecycle әдістеріне негізделген кодты кішірек бөліктерге бөлудің орнына, енді функционалдылыққа байланысты кодты кішірек бірліктерге реттеуге және бөлуге болады.
UseEffect Hook дегеніміз не?
Ілмектер - ES6 сыныптарын жазбай-ақ күйге және басқа реакция мүмкіндіктеріне қол жеткізуге мүмкіндік беретін функциялар. React Hooks API интерфейсінде useEffect деп аталатын ілмек бар. Егер сіз реакцияның өмірлік циклдерімен таныс болсаңыз, useEffect ілгегі компонентDidMount, компонентDidUpdate, және компонентWillUnmount өмірлік цикл әдістері біріктірілген.
React Hooks құжаттамасына сәйкес, ол ES6 класының құрамдастарының өмірлік цикл әдістерімен кейбір мәселелерді шешу үшін жасалған.
Синтаксис
Бірінші аргумент әдепкі бойынша әрбір көрсетуден кейін орындалатын кері шақыру функциясы болып табылады. Екінші параметр қосымша Тәуелділік массиві болып табылады, ол ілмекке мақсатты күй өзгерген жағдайда ғана кері шақыруға нұсқау береді.
Hook әрбір тәуелділіктің тарихи және қазіргі күйлерін салыстырады. Екі мән сәйкес келмесе, Hook бірінші параметрде көрсетілген кері шақыруды шақырады. Тәуелділік массивтері әдеттегі кері шақыру әрекетін өзгертеді және Hook құрамдас ауқымындағы барлық басқа құрамдастарды елемейтініне кепілдік береді.
Негізгі пайдалану
Хабарды сақтау үшін жоғарыдағы код үлгісінде React useState пайдаланамын. Осыдан кейін мен хабарлама күйінің айнымалы мәнін алып, оны экранға басып шығарамын. Дегенмен, мен енді компонент орнатылғаннан кейін бір секундтан кейін хабарламаны өзгерту үшін Effect қолданбасын қолданғым келеді.
Мен әсерімді React шеңберінен useEffect импорттағаннан кейін useState жолының артына енгіздім. UseEffect бірінші параметрі функция болып табылады. Бұл функция өңдегіші орындалғанда, ол сіз берген кез келген жанама әсерлер туралы қамқорлық жасайды. Функция React компонентінің өмірлік циклінің оқиғаларының бірі орын алған кезде шақырылатын кері шақыру функциясы болып табылады.
Оны қашан қолдану керек?
UseEffect ілгегі әртүрлі жағдайларда пайдалы болуы мүмкін. Төмендегілер ең маңызды болып табылады:
- Берілген аргументке байланысты деректерді алғымыз келсе, біз бұл параметрді клиент тарапынан өзгерте аламыз. Ол параметр жаңа деректермен жаңартылғаннан кейін шақырылады.
- Егер біз API соңғы нүктесінен деректерді шығарып, оны клиент жағында көрсеткіміз келсе. Біздің құрамдасымыз көрсеткенде useEffect ілгегіне берілген функция немесе өңдеуші орындалады және құрамдас күйлеріндегі деректер алынады. Бұл күйлер кейін пайдаланушы интерфейсінің құрамдастарында қолданылады.
- Құрамдасыңыз сыртқы әлем деректеріне сүйеніп, деректердің келетініне көз жеткізе алмасақ, біз Effect пайдалануымыз керек (мүмкін сервер сол жерде болуы мүмкін). Мәселелерді шығарудың және басқа құрамдастардың көрсетілуіне жол бермеудің орнына, оларды useEffect ілгегіне салыңыз.
Жағдайларды пайдаланыңыз
Егер құрамдас бірінші іске қосылғаннан кейін қайта көрсетілсе, ол орындалмайды.
Компонент рендерленген немесе қайта көрсеткенде, ол әрқашан орындалуы керек.
Әдепкі бойынша, бағдарлама тек бір рет жұмыс істейді. Одан кейін тірек мәндері өзгерсе, іске қосыңыз:
Асинхронды әрекеттер үшін әрқашан useEffect пайдаланыңыз.
useEffect код блоктары серіктес әзірлеушілер үшін асинхронды тапсырмалардың айқын маркерлері болып табылады. UseEffect қолданбай-ақ асинхронды кодты жасауға болады, бірақ бұл «Реакция әдісі» емес және ол күрделілікті де, қателер қаупін де арттырады.
Пайдаланушы интерфейсін тоқтатуы мүмкін асинхронды кодты жазудың орнына useEffect пайдалану - бұл React қауымдастығында танымал әдіс, әсіресе жанама әсер ету үшін оны React тобы құрастырған әдіс.
Оны пайдаланудың тағы бір артықшылығы – әзірлеушілер кодты жай қарап шығып, «басқару ағынынан тыс» іске қосылған кодты бірден анықтай алады, бұл бірінші көрсету циклінен кейін ғана маңызды болады. Сонымен қатар, блоктар қайта пайдалануға болатын және одан да көп семантикалық теңшелетін ілмектерге шығаруға жарамды.
Мысал
UseEffect кодын пайдаланып, секундына санды арттырыңыз.
қорытынды
Негізгі дизайн принциптері мен useEffect Hook-тің ең жақсы тәжірибелерін түсіну, менің ойымша, келесі деңгейдегі React әзірлеушісі болғыңыз келсе, үйрену үшін маңызды дағды.
Қорытындылау үшін useEffect Hook императивті, ықтимал әсер ететін толық логиканы қамтитын функцияны алады. Орындауға әсер ету үшін екінші параметр болып табылатын тәуелділік массивін пайдалануға болады. Онымен жұмыс істеу кезінде қайтару функциясын пайдаланып тазалау кодын жазу керек.
Мақала пайдалы болса, түсініктемелерде бізге хабарлаңыз.
пікір қалдыру