Увод у Реацт Хоокс

Како библиотека РеацтЈс добија нова ажурирања, додаје се много ствари, а неколико и застарелих. РеацтЈс постаје моћнији из дана у дан због таквих ажурирања. Као програмер, морате да будете у току са новим функцијама које се појављују у свакој верзији.

Јесте ли чули за Реацт Хоокс?

Па, Реацт Хоокс, функција која је доступна у Реацт в16.7.0-алпха, је нешто што бисте требали знати.

Ево најаве за Реацт Хоокс.

У горњем коду useStateје прва Кука.

Хајде сада да ускочимо у проблем који ће Реацтс Хоокс решити.

На крају, свака нова функција је представљена да би решила проблем. Ево списка ствари које званична веб локација за реакције има да каже о проблемима који ће бити решени.

Тешко је поново користити логику са стањем између компоненти

Понашање за вишекратну употребу не може се повезати са компонентом Реацт. Добар пример за то може бити повезивање са продавницом. Ако имате искуства са Реацтом, можда знате неке обрасце попут рендерираних реквизита и компоненти вишег реда који могу бити корисни током решавања таквих проблема. Користећи такве обрасце, компоненте морају бити реструктуриране како би их користиле што отежава праћење и одржавање кода.

Увођењем Хоокс-а, из компоненте се може издвојити логика стања. То омогућава самостално тестирање и може се поново користити.

Помоћу Хоокс-а можете поново користити логику са стањем без стварне промене хијерархије компонената.

Сложене компоненте постају тешко разумљиве

Постоје случајеви када компонента прерасте из малог стања у неуправљиво стање логике стања.

Свака метода животног циклуса понекад садржи комбинацију неповезане логике. На пример, компонента може извршити преузимање података путем АПИ позива у componentDidMountи componentDidUpdate. Међутим, иста componentDidMountметода може садржати и неку неповезану логику.

Ова логика поставља слушаоце догађаја са чишћењем изведеним у componentWillUnmount. Повезани код који се мења заједно дели се.

Неповезани код који се комбинује у једну методу доноси грешке и недоследности.

Често наилазимо на ситуацију да нисмо у стању да велику компоненту поделимо на мање због вредности које имају статус државе. Такође, постаје тешко тестирати их.

Да би решио овај проблем, Хоокс вам омогућавају да једну компоненту поделите на мање функције на основу тога који су делови повезани. Добар пример за то може бити постављање претплате или преузимање података , без обзира на поделу кода на основу методе животног циклуса.

Са Хоокс-ом се може користити више Реацт-ових функција без потребе за часовима.

Али како Куке заиста раде?

Ево исечка кода који смо видели горе:

Линк до ЦодеСандбок-а

Употреба useStateје Кука о којој говоримо.

Називамо је унутар функционалне компоненте да бисмо јој додали локално стање. Реацт ће сачувати ово стање између свих рендерирања. useStateвраћа пар који има вредност тренутног стања и функцију која вам омогућава да ажурирате вредност.

Ову функцију можете позвати из водитеља догађаја или са неког другог места. Слично је као this.setStateу класи Реацт, али не спаја старо и ново стање у потпуности.

Само је један аргумент useStateтоме почетно стање. У овом примеру датом горе, почетно стање је 0зато што наш бројач почиње од нуле. Имајте на уму да за разлику од тога this.state, држава овде не мора нужно бити објекат - међутим она може бити објекат ако желите.

Декларисање више променљивих стања

Синтакса деструктурирања низа даје различита имена променљивим стања које смо декларисали позивањем useState. Ова имена не припадају делу useStateАПИ-ја. Уместо тога, Реацт претпоставља да ако позивате много пута, радите то истим редоследом током времена сваког приказа.

Напомена: Куке су функције које вам омогућавају да се „прикључите“ на реакцију стања и карактеристика животног циклуса из компоненти функције. Куке не раде унутар Реацт класа - они вам омогућавају да користите Реацт без класа.

Еффецт Хоок

Радећи са Реацтом можда сте већ радили на преузимању података, претплатама или ручној промени ДОМ-а из Реацт компоненти. Ове операције називамо „нежељеним ефектима“ (или укратко „ефектима“).

Тхе Еффецт Хоок, useEffectдодаје могућност извођења нежељених ефеката из функционалне компоненте. Има исту сврху као componentDidMount, componentDidUpdateи componentWillUnmountу Реацт класама, али обједињен у један АПИ.

На пример, доња компонента поставља наслов документа након што Реацт ажурира ДОМ:

Линк до ЦодеСандбок-а

Када упутите позив useEffect, кажете Реацту да покрене своју функцију „ефекта“ након испирања промена на ДОМ-у. Ефекти се декларишу унутар компоненте и тако имају приступ њеним реквизитима и стању. Реацт подразумевано покреће ефекте након сваког приказа који се догоди - укључујући и први приказ.

Правила удица

Куке су ЈаваСцрипт функције, али имају два додатна правила:

  • Позовите куке само на највишем нивоу . Не покушавајте да зовете Куке унутар петљи, услова или угнежђених функција.
  • Куке позивајте само из компонената функције Реацт . Не покушавајте да зовете Хоокс из уобичајених ЈаваСцрипт функција.

Па, ово је брз поглед на Реацт Хоокс. За детаљнији опис следите овај линк испод:

Куке на први поглед - реагујте

ЈаваСцрипт библиотека за изградњу корисничког интерфејса респонсејс.орг

Срећно учење! ? ?