50 kõige olulisemat React Intervjuu küsimust ja vastust

ReactJS-i arendajad on väga nõutud ja selleks on hea põhjus. Kuid töökoha saamiseks peate tõestama oma oskusi raamistikus.

Järgnevalt on korduma kippuvad Reacti arendusküsimused ja nende vastused, mida peaksite teadma. See sisaldab kõike alates põhitõdedest kuni keerukamate teemadeni.

1. Mis on React?

React on tasuta ja avatud lähtekoodiga JavaScripti teek kasutajaliidese arendamiseks, mis kasutab komponente üheleheliste rakenduste väljundi loomiseks. Reacti töötas välja Facebook (Meta) ja seda haldab arendajate kogukond.

2. Loetlege Reacti olulised omadused

Reacti kõige olulisemate funktsioonide hulka kuuluvad:

1. Kasutusmugavus
2. Kiire areng
3. Komponentide kasutamine
4. JSX
5. Virtuaalne DOM
6. Suure jõudlusega
7. Ühesuunaline andmete sidumine

3. Kus on Reacti projektihoidla?

React on monohoidla, mis elab aadressil https://github.com/facebook/react. Monohoidla olemine tähendab, et kogu selle kood ja muud allikad salvestatakse lihtsamaks arendamiseks ja haldamiseks ühte kohta.

4. Mis on Reacti praegune stabiilne versioon?

Reacti uusim stabiilne versioon alates 14. juunist 2022 on 18.2.0.

5. Märkige erinevused React Native ja ReactJS vahel

React ja ReactJS on samad, samas kui React Native on üles ehitatud Reactile. Nende erinevuste tõttu kasutatakse Reacti veebirakenduste dünaamiliste ja tundlike kasutajaliideste loomiseks, samas kui React Native on mõeldud rakenduste loomiseks mobiilirakendustena.

6. Mis vahe on elemendil ja komponendil?

React element on lihtne ja muutumatu objekt, mis on loodud DOM-sõlme esindamiseks. Muutumatu olemine tähendab, et seda ei saa pärast loomist muuta, kuna see renderdab DOM-i. Reacti komponent on seevastu muudetav ja toodab renderdamisel JSX-i väljundit.

7. Kuidas luua komponenti?

Reactis on komponendi loomiseks kaks võimalust: 1.) Funktsioonikomponendid ja 2.) klassikomponendid. Nagu nimed viitavad, luuakse funktsiooni komponent funktsioonideklaratsiooni abil, klassikomponent aga klassideklaratsiooni abil.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Loetlege reageerimiskomponendi 4 etappi

Reacti komponent läbib oma elutsükli jooksul järgmised 4 etappi:

1. Esialgne etapp – Komponendi ehitus vaikeseisundis koos esialgsete tugipostidega
2. Paigaldusfaas – komponendi JSX renderdamine
3. Värskendamise faas – Komponendi oleku muutused ja rakenduse ümberjoonistamine
4. Lahtiühendamise faas – Komponentide eemaldamine DOM-ist

9. Selgitage, mida tähendab kõrgemat järku komponent

Kõrgemat järku komponent (HOC) on Reacti metoodika komponentide loomiseks. See kasutab olemasolevat komponenti, et luua uus, millel on lisafunktsioonid. Teisisõnu, HOC on funktsioon, mis võtab komponendi argumendina ja tagastab uue komponendi koos lisatud funktsioonidega.

10. Mis on kontrollitavad ja mittekontrollitavad komponendid?

Kontrollitav komponent on Reacti komponent, mis võtab oma väärtuse rekvisiitide kaudu ja teavitab süsteemi kõigist muudatustest tagasihelistamisega. Seda juhib emakomponent, mis haldab seda riik ja edastab väärtused rekvisiididena juhitavale komponendile. Kontrollimatu komponent seevastu haldab oma olekut ja peate päringu esitama DOM kasutamine ref selle väärtuse saamiseks.

11. Mis on Props in React?

Props in React on lihtsalt lihtne viis omaduste ütlemiseks ja sellega viitate komponendi omadustele. Rekvisiite kasutatakse andmete edastamiseks ülemkomponendist ühele või mitmele alamkomponendile ja need on alamkomponendile kirjutuskaitstud.

12. Mis on rekvisiidid.lapsed?

Atribuut Props.children sisaldab teavet komponendi kogu sisu kohta, millel on avamis- ja sulgemismärge. Need lapsed viitavad kõigile elementidele, mis on praeguses komponendis määratletud ja võivad olla üks, mitu või mitte ükski.

13. Kas saate Reactis rekvisiite värskendada?

Ei, Reacti rekvisiidid on ülalt alla ja muutumatud. See tähendab, et komponent võib oma lastele saata mis tahes omadusi, mis talle meeldivad, kuid ta ei saa oma rekvisiite värskendada. Ainult selle vanem saab selle rekvisiite värskendada.

14. Mis on JSX?

JSX tähistab JavaScripti XML-i. See on JavaScripti süntaksilaiend, mis võimaldab kirjutada HTML-i reageerimiskoodi sisse. Brauser ei mõista JSX-i niikuinii, seega peab React selle loetavaks HTML-koodiks renderdama.

15. Mis vahe on komponendil ja elemendil?

Element on virtuaalse DOM-sõlme olekuteta ja muutumatu määratlus. See sisaldab nii tüüpi kui ka atribuuti, kuid selliseid meetodeid nagu komponendil pole. See meetodite puudumine muudab selle kiireks.

16. Mis on olek Reactis?

Reacti olek viitab komponendi sisseehitatud objektile, mida kasutatakse selle komponendi teabe hoidmiseks ja haldamiseks. Olek võib aja jooksul muutuda ja käivitab seega selle komponendi uuesti renderdamise. Olek tuleb defineerida komponendi konstruktorimeetodis, vastasel juhul muutub komponent olekutuks.

17. Mis on olekuta komponent?

Olekuta Reacti komponendil pole olekut. See tähendab, et te ei saa kumbagi selle olekut määrata this.setState() meetodil ega ole seda renderdatud. Kodanikuta komponendil võib siiski olla rekvisiite.

18. Kuidas värskendate olekut rakenduses React

Värskendate komponendi olekut, helistades sellele this.setState() meetod.

19. Selgitage Reacti ranget režiimi

Reacti range režiim on tööriist, mis aitab arendajal avastada võimalikke probleeme rakenduses, aktiveerides komponentide sügavama taseme kontrolli ja tuues esile rohkem hoiatusi. Range režiim on saadaval ainult arendusrežiimis.

20. Mida tähendab oleku tõstmine reaktsiooni ajal?

See tähendab, et alamkomponentidel on vanemalt ühine olek, kuna see muudab asjade haldamise lihtsamaks kui iga alamkomponendi jaoks eraldi ühisoleku haldamise.

21. Kuidas te Reactis andmeid edastate?

Reactis edastate andmeid rekvisiitide ja tagasihelistamiste abil. Reacti rekvisiidid on ühesuunalised, võimaldades atribuute edastada ainult vanemate komponentidelt nende lastele. Andmete edastamiseks alamkomponendist vanemale peate kasutama tagasihelistamise funktsiooni.

22. Määratlege Vool in React

Flux on ühesuunaline kontseptsioon andmevoo suunamiseks rakenduses. Ühesuunalisus tähendab, et andmed saavad edastada ainult vanematelt komponentidele lastele. Flux võib sisaldada ka mitut andmesalvet rakenduse kohta.

23. Määratlege Redux in React

Redux on kasulik avatud lähtekoodiga JavaScripti teek rakenduse keeruliste olekute haldamiseks. See on sõltumatu ja seda saab kasutada muudes raamistikes, näiteks Angular. Erinevalt Fluxist tsentraliseerib Redux rakenduse olekuhalduse, muutes seeläbi keeruka kasutajaliidese loomise lihtsamaks.

24. Millal peaksite Reduxit kasutama?

Kõik rakendused ei vaja Reduxi. Kuid see on kasulik järgmistel juhtudel:

1. Kui teie rakenduses on palju rakenduse olekuid
2. Kui teie rakenduse loogika on keeruline
3. Kui teie rakendusel on suur koodibaas
4. Kui peate rakendust sageli värskendama
5. Kui rakendusega töötab palju inimesi

25. Mis vahe on Reduxi ja Fluxi vahel?

Peamine erinevus nende kahe vahel on see, et Redux haldab kõiki rakenduste andmeid ühest poest, samas kui teil võib Fluxi all olla mitu poodi.

26. Loetlege Reduxi komponendid

Reduxil on 4 peamist osa:

1. E-POOD – Siia salvestate rakenduse oleku.
2. tegevus – Need on sündmused, mille tõttu rakendus saadab andmeid Reduxi poodi.
3. reduktor – See on funktsioon, mis aktsepteerib argumentidena rakenduse praegust olekut ja toimingut ning tagastab seejärel uue oleku.
4. Middleware – See funktsioon võimaldab arendajal jäädvustada kõik komponendi toimingud enne, kui need jõuavad redutseerimisfunktsioonini.

27. Mis on React Hooks?

Reacti konksud on funktsioonikomponentide funktsioon, mis võimaldab juurdepääsu erinevatele Reacti funktsioonidele, nagu olekuandmed ja renderdusvärskendused. Seda tutvustati versioonis React 16.8.

28. Loetlege konksude tüübid rakenduses React

Reactis on üle 15 konksu, alustades põhikonksudest nagu useState, useEffect ja useContext kuni lisakonksudeni, nagu useCallback, useReducer, useMemo, useRef ja nii edasi.

29. Mis on fragmendid?

Reacti fragment on mugav viis mitme alamelemendi grupeerimiseks komponendis ilma neid DOM-i lisamata. Määrake lihtsalt silt, kasutades:

<>

or

ja laadige sisse kõik alamelemendid, mida soovite. Ainus erinevus seisneb selles, et lühiversioon <> ei aktsepteeri võtmeid ja atribuute, samas kui pikk versioon aktsepteerib.

30. Loetlege react-dom paketi peamised meetodid

Need on createPortal() laste väliseks DOM-iks renderdamiseks ja flushSync() värskenduste loputamiseks. Samuti on olemas meetodid render() ja hydrate(), mis on alates React 18-st asendatud meetoditega createRoot() ja hydrateRoot().

31. Mis on reageerimisklahvid?

Võtmed on kordumatud identifikaatorid, mida on kõige parem kasutada loendite haldamiseks. Võtmed muudavad loendi üksikute üksuste tuvastamise lihtsaks ja teavad, millal iga üksust on mingil viisil värskendatud, kustutatud või muudetud.

32. Miks on reageerimisklahvid olulised?

Võtmed on Reactis olulised, kuna need aitavad tegelikku DOM-i tõhusalt renderdada. React on hea, sest see püüab minimeerida, milliseid komponente see pärast sündmust uuesti renderdab, ja loendis olevate võtmete kasutamine takistab Reactil terveid loendeid uuesti renderdada, mis võib suurte loendite puhul olla probleem.

33. Mis on sündmus reaktsioonis?

Sündmus on mis tahes toiming rakenduses, mis tuleb kas kasutajalt või süsteemilt. Sündmus võib ulatuda hiireklõpsust või mobiilseadmetes puudutamisest kuni akna suuruse muutmiseni, klahvivajutamiseni, lohistamiseni, fokuseerimiseni ja nii edasi.

34. Selgitage, mida Sünteetiline sündmus vahendid

Sünteetiline sündmus on brauseri loomulike sündmuste ümbris, mille probleemiks on see, et erinevad brauserid nimetavad oma sündmusi erinevalt. React kasutab sünteetilisi sündmusi, et vältida probleemi, mis tekib kõigi erinevate brauserite jaoks mitmete rakenduste ja meetodite loomisel. Nii säilitab React kõigi erinevate brauserisündmuste ühised nimed ühtse API-na.

35. Mis on Webpack?

Webpack on moodulite komplekteerimissüsteem, mida kasutatakse JavaScripti ja CSS-failide kombineerimiseks ja minimeerimiseks. See on üles ehitatud Node.js-ile ja on abiks suure hulga failide või mittekoodivaradega (nt piltide ja fontidega) töötamisel.

36. Mis on loo-reageeri rakendus?

Create-react-app on tööriist, mis aitab teil luua Node.js keskkonnas ühelehelise Reacti rakenduse. See genereerib kõik failid ja kaustad, mida vajate põhirakenduse käivitamiseks, ja saate selle sealt võtta. See nõuab Node'i versiooni 14.0.0 ja npm alates ver. 5.6.

Kasutamine on lihtne:

npx loo-reageeri-rakendus myNewApp

cd myNewApp

npm algus

37. Kas saate Reactiga renderdada serveripoolt?

Jah, saate, kuigi suurte projektide jaoks võib see olla ressursimahukas. Serveripoolne renderdamine on kasulik, kuna see parandab kasutajakogemust ja SEO-d. Teil on vaja Node.js keskkonda, komplekti nagu Webpack ja raamistikku nagu Järgmine.js ja Remix Reacti rakenduste renderdamiseks käitusajal. Intensiivse ressursikasutuse lahenduseks on kasutada staatilise saidi generaatorit, näiteks Next.js-põhist Gatsby.

38. Selgitage, mida noolefunktsioon teeb

Noolefunktsioon on lihtsalt lühem viis funktsioonide määratlemiseks. See on ES6 stenogramm, mis asendab:

= funktsioon () koos ()=>.

Näiteks:

test = funktsioon(){

tagasta "See on test";

}

siis muutub:

test = () => {

tagasta "See on test";

}

või üherealiste avalduste jaoks:

test = () => "See on test";

39. Mis on a Reageeri ruuter?

Reacti ruuter on raamatukogu, mis pakub Reacti rakenduses marsruutimise funktsioone. See muudab rikkalike navigatsioonikomponentide kaasamise ja kasutamise lihtsaks, mis võib olla suurte või keerukate projektide puhul väga kasulik.

40. Millised on React Routeri kasutamise peamised eelised?

See loob teie rakenduse jaoks erinevad URL-i teed ning pakub window.location väärtused ja ajalooobjekti.

41. Mis on ComponentWillUnmount()?

See on komponentmeetod, mida kutsutakse välja alati, kui React kavatseb komponendi hävitada. See on hea koht asjade puhastamiseks, taimerite tühjendamiseks, võrgupäringute tühistamiseks ja muude oluliste deinitialiseerimisprobleemide lahendamiseks.

42. Mis on konstruktor()?

Konstruktor on komponendi meetod, mida kutsutakse komponendi initsialiseerimise ajal. Seda kasutatakse tavaliselt kohalike olekute lähtestamiseks ja sündmuste käitleja meetodite sidumiseks.

43. Mis on virtuaalne DOM?

Reacti virtuaalne DOM on tegeliku HTML-dokumendi DOM-i kerge koopia. Seda kasutatakse tegeliku DOM-i tõhusaks haldamiseks ja muudatuste värskendamiseks.

44. Millised on virtuaalse DOM-i eelised reaalse DOM-i ees?

Virtuaalne DOM on kerge ja kiiremini renderdatav kui tegelik DOM ning see muudab tõhusamaks esmalt virtuaalsesse DOM-i renderdamise ja tegelikku DOM-i muuta alles siis, kui selleks on vajadus. Igal reaalse DOM-i sõlmel on virtuaalses DOM-is vastav komponent ja kui virtuaalses komponendis on pärast renderdamist muudatusi, teab React täpselt, millist tegelikku HTML-i sõlme värskendada või kustutada.

45. Selgitage mõistet Sobitamine in React

Leppimine on Reacti meetod tegeliku DOM-i värskendamiseks ainult vajaduse korral, kontrollides diferentseerimise kaudu virtuaalse DOM-i värskendatud versioone ja värskendades ainult täpseid sõlme, mis tegelikus DOM-is muutusid.

46. Selgitage mõistet Profiler in React

Profiler on Reacti tööriist, mis aitab rakendust optimeerida, mõõtes, mitu korda rakendus renderdab ja kui kaua iga komponendi renderdamine aega võtab. See aitab arendajal tuvastada rakenduse osi, mis võivad vajada optimeerimist.

47. Selgitage mõistet kontekst in React

Kontekst on meetod andmete edastamiseks Reacti komponentide vahel paljudel tasanditel, ilma et peaks andmeid rekvisiite kasutades iga pesastustasandi kaudu edastama. Seda on kõige parem kasutada andmete hõlpsaks jagamiseks paljude komponentidega, mis ei vaja pidevat värskendust (nt teemateave ja kasutajaandmed). Selle negatiivne külg on see, et see võib komponentide taaskasutamise keeruliseks muuta.

48. Selgitage mõistet Paigaldamine in React

Paigaldamine Reactis on komponendi ühendamine DOM-i sõlmena. Lahtimonteerimine on vastupidine.

49. Selgitage mõistet visualiseerimine in React

Renderdamine on komponendi joonistamise protsess. Tavaliselt juhtub see siis, kui komponendi olek muutub ja React peab kasutajaliidese ümber joonistama. Kui mõnda komponenti renderdamise ajal ümber joonistatakse, joonistatakse ümber ka selle alamkomponendid.

50. Selgitage mõistet Vea piir in React

Veapiir viitab komponendile React, mis püüab kinni JavaScripti vead oma alamkomponentidest, logib vead ja kuvab kokkujooksnud sõlmede asemel varu kasutajaliidese. React 16-s võeti kasutusele veapiirid.

Järeldus

Oleme jõudnud selle Reacti intervjuu 50 parima kohustusliku küsimuse loendi lõppu ja loodetavasti on teil praeguseks hea ettekujutus sellest, mida võite oodata.

Peaksite ka arvestama, et miski ei jää samaks ja teie intervjuu võib olla mis tahes suunas. Seetõttu peaksite õppima ja olema kursis.