Калі вы распрацоўшчык React, які яшчэ не даведаўся пра хукі React, цяпер самы момант. Гэты пост будзе падрабязна праглядаць хук useEffect React. Гэта кручок, эквівалент швейцарскага армейскага нажа. Ён вырашае мноства праблем, напрыклад, як атрымаць дадзеныя пры мантаванні кампанента, як запусціць код пры змене стану або рэквізіту, як наладзіць таймеры або інтэрвалы і гэтак далей.
UseEffect выкарыстоўваецца практычна для ўсяго, што вы хочаце «рабіць» у кампаненце React, які не вяртае JSX (любы тып пабочнага эфекту). Вы таксама можаце мець некалькі useEffects для кожнага кампанента.
Уся гэтая магутнасць мае цану: калі вы не разумееце, як яна працуе, гэта можа выклікаць здзіўленне. У гэтай публікацыі мы разгледзім розныя прыклады, каб вы маглі зразумець канцэптуальную мадэль і прымяніць яе да ўласнага кода.
Рэагуйце на кручкі – Што гэта спрабуе вырашыць?
Хукі былі ўпершыню прадстаўлены ў версіі React 16.8 і цяпер выкарыстоўваюцца многімі праектамі React. Хукс пераадольвае праблему паўтарэння кода паміж кампанентамі. Яны напісаны без выкарыстання класаў. Гэта не азначае, што React пакідае класы; гаплікі - гэта проста альтэрнатыўны метад.
React дазваляе хутка ствараць складаныя кампаненты з логікай стану. Цяжка аддзяліць гэтыя кампаненты, бо клас абапіраецца на метады жыццёвага цыкла React. Тут на дапамогу прыходзяць React Hooks.
Яны дазваляюць падзяліць кампанент на больш дробныя функцыі. Замест таго, каб дзяліць код на больш дробныя часткі на аснове метадаў жыццёвага цыклу, цяпер вы можаце арганізаваць і падзяліць код на меншыя блокі ў залежнасці ад функцыянальнасці.
Што такое useEffect Hook?
Хукі - гэта функцыі, якія дазваляюць атрымаць доступ да стану і іншым магчымасцям рэагавання без неабходнасці пісаць класы ES6. React hooks API мае хук пад назвай useEffect. Калі вы знаёмыя з жыццёвымі цыкламі react, хук useEffect такі ж, як і компонентDidMount, компонентDidUpdate, і компонентWillUnmount метады жыццёвага цыклу ў спалучэнні.
Згодна з дакументацыяй React Hooks, ён быў створаны для вырашэння некаторых праблем з метадамі жыццёвага цыклу кампанентаў класа ES6.
сінтаксіс
Першы аргумент - гэта функцыя зваротнага выкліку, якая выконваецца па змаўчанні пасля кожнага візуалізацыі. Другі параметр - гэта дадатковы масіў Dependency, які ўказвае Hook на зваротны выклік толькі пры змене мэтавага стану.
Хук параўноўвае гістарычны і цяперашні стан кожнай залежнасці. Калі два значэння не супадаюць, Хук выклікае зваротны выклік, указаны ў першым параметре. Масівы залежнасцяў змяняюць звычайнае паводзіны зваротнага выкліку і гарантуюць, што Хук ігнаруе ўсе іншыя кампаненты ў вобласці дзеяння кампанента.
Асноўнае выкарыстанне
Каб захаваць паведамленне, я выкарыстоўваю React useState у прыкладзе кода вышэй. Пасля гэтага я бяру сваю зменную стану паведамлення і друкую яе на экране. Аднак цяпер я хачу выкарыстоўвацьEffect, каб змяніць паведамленне праз секунду пасля таго, як кампанент быў змантаваны.
Я ўставіў свой эфект за радок useState пасля імпарту useEffect з платформы React. Першы параметр для useEffect - гэта функцыя. Калі гэты апрацоўшчык функцыі выконваецца, ён будзе клапаціцца аб любых пабочных эфектах, якія вы даеце. Функцыя - гэта функцыя зваротнага выкліку, якая выклікаецца, калі адбываецца адно з падзей жыццёвага цыклу кампанента React.
Калі выкарыстоўваць яго?
Хук useEffect можа быць карысны ў розных сітуацыях. Наступныя з'яўляюцца найбольш важнымі:
- Мы можам змяніць гэты параметр з боку кліента, калі мы хочам атрымаць дадзеныя ў залежнасці ад пададзенага аргументу. Ён будзе адкліканы пасля таго, як параметр будзе абноўлены свежымі дадзенымі.
- Калі мы хочам атрымаць дадзеныя з канчатковай кропкі API і паказаць іх на баку кліента. Пры візуалізацыі нашага кампанента выконваецца функцыя або апрацоўшчык, дадзены хуку useEffect, і даныя ў станах кампанента здабываюцца. Гэтыя статусы затым выкарыстоўваюцца ў кампанентах карыстальніцкага інтэрфейсу.
- Калі ваш кампанент абапіраецца на дадзеныя з знешняга свету, і мы не можам гарантаваць, што даныя паступяць, мы павінны выкарыстоўвацьEffect (магчыма, сервер знаходзіцца ўнізе). Замест таго, каб ствараць праблемы і прадухіляць паказ іншых кампанентаў, змесціце іх у хук useEffect.
Выпадкі прымянення
Калі кампанент паўторна рэндэрынгу пасля першага запуску, ён не будзе выкананы.
Кожны раз, калі кампанент рэндэрыруе або паўторна, ён заўсёды павінен быць выкананы.
Па змаўчанні праграма запускаецца толькі адзін раз. Пасля гэтага, калі значэнні prop зменяцца, запусціце:
Для асінхронных дзеянняў заўсёды выкарыстоўвайце useEffect.
Блокі кода useEffect з'яўляюцца відавочнымі маркерамі асінхронных заданняў для вашых калег-распрацоўшчыкаў. Можна стварыць асінхронны код без выкарыстання useEffect, але гэта не «метад React», і ён павялічвае як складанасць, так і рызыку памылак.
Выкарыстанне useEffect замест напісання асінхроннага кода, які можа спыніць карыстацкі інтэрфейс, з'яўляецца добра вядомай тэхнікай у супольнасці React, асабліва спосабам, якім каманда React пабудавала яго для выканання пабочнага эфекту.
Яшчэ адна перавага яго выкарыстання заключаецца ў тым, што распрацоўшчыкі могуць проста праглядзець код і неадкладна выявіць код, які запускаецца «па-за патокам кіравання», што становіцца важным толькі пасля першага цыклу візуалізацыі. Акрамя таго, блокі падыходзяць для здабывання ў шматразовыя і нават больш семантычныя карыстальніцкія хукі.
прыклад
Выкарыстоўваючы код useEffect, павялічвайце лік у секунду.
заключэнне
Разуменне асноўных прынцыпаў праектавання і лепшых практык useEffect Hook, на мой погляд, з'яўляецца важным навыкам, якому трэба навучыцца, калі вы хочаце стаць распрацоўшчыкам React наступнага ўзроўню.
Падводзячы вынік, useEffect Hook атрымлівае функцыю, якая ўключае імператыўную, патэнцыйна эфектную поўную логіку. Масіў залежнасцяў, які з'яўляецца другім параметрам, можа быць выкарыстаны для ўплыву на выкананне. Разбіраючыся з гэтым, таксама неабходна напісаць код ачысткі з дапамогай функцыі вяртання.
Дайце нам ведаць у каментарах, калі артыкул быў карысным.
Пакінуць каментар