Top 50 vprašanj in odgovorov za intervju React, ki jih morate vedeti

Razvijalci ReactJS so zelo iskani in za to obstaja dober razlog. Toda za pridobitev službe boste morali dokazati svoje znanje v okviru.

Sledijo pogosto zastavljena vprašanja o razvoju Reacta in odgovori nanje, ki bi se jih morali zavedati. Vključuje vse od osnov do naprednejših tem.

1. Kaj je React?

React je brezplačna in odprtokodna knjižnica JavaScript za razvoj uporabniškega vmesnika, ki uporablja komponente za ustvarjanje rezultatov za enostranske aplikacije. React je razvil Facebook (Meta), vzdržuje pa ga skupnost razvijalcev.

2. Naštejte pomembne lastnosti Reacta

Najpomembnejše lastnosti Reacta vključujejo:

1. Enostavnost uporabe
2. Hiter razvoj
3. Uporaba komponent
4. Jsx
5. Virtualni DOM
6. Visoka zmogljivost
7. Enosmerna vezava podatkov

3. Kje je repozitorij projektov React?

React je mono-repozitorij, ki živi na https://github.com/facebook/react. Biti mono-repozitorij pomeni, da so vsa njegova koda in drugi viri shranjeni na istem mestu za lažji razvoj in upravljanje.

4. Kakšna je trenutna stabilna različica Reacta?

Najnovejša stabilna različica Reacta od 14. junija 2022 je 18.2.0.

5. Navedite razlike med React Native in ReactJS

React in ReactJS sta enaka, medtem ko je React Native zgrajen na Reactu. Zaradi svojih razlik se React uporablja pri ustvarjanju dinamičnih in odzivnih uporabniških vmesnikov za spletne aplikacije, medtem ko je React Native zasnovan za izdelavo aplikacij kot mobilnih aplikacij.

6. Kakšna je razlika med elementom in komponento?

Element React je preprost in nespremenljiv objekt, ustvarjen za predstavitev vozlišča DOM. Ker je nespremenljiv, pomeni, da ga ni mogoče spremeniti, ko je ustvarjen, saj se upodablja v DOM. Po drugi strani pa je komponenta React spremenljiva in po upodabljanju ustvari izhod JSX.

7. Kako ustvarite komponento?

V Reactu lahko komponento ustvarite na dva načina: 1.) Funkcijske komponente in 2.) Komponente razreda. Kot pove že ime, se funkcijska komponenta ustvari z deklaracijo funkcije, medtem ko se komponenta razreda ustvari z deklaracijo razreda.

//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. Naštejte 4 stopnje komponente React

Komponenta React gre v svojem življenjskem ciklu skozi naslednje 4 faze:

1. Začetna faza – Konstrukcija komponente v privzetem stanju z začetnimi rekviziti
2. Montažna faza – JSX upodabljanje komponente
3. Faza posodabljanja – Spremembe stanja komponent in prerisovanje aplikacije
4. Faza odklopa – Odstranitev komponente iz DOM

9. Pojasnite, kaj pomeni komponenta višjega reda

Komponenta višjega reda (HOC) je metodologija React za ustvarjanje komponent. Uporablja obstoječo komponento za ustvarjanje nove z dodatno funkcionalnostjo. Z drugimi besedami, HOC je funkcija, ki vzame komponento kot argument in vrne novo komponento z dodanimi funkcijami.

10. Kaj so nadzorovane in nenadzorovane komponente?

Nadzorovana komponenta je komponenta React, ki pridobi svojo vrednost prek rekvizitov in obvesti sistem o morebitnih spremembah prek povratnih klicev. Nadzira ga nadrejena komponenta, ki upravlja z njim so bili in posreduje vrednosti kot rekvizite nadzorovani komponenti. Nenadzorovana komponenta po drugi strani upravlja svoje stanje in morali boste poizvedovati DOM uporabo ref da dobi svojo vrednost.

11. Kaj so rekviziti v Reactu?

Rekviziti v Reactu so le preprost način za povedati lastnosti in s tem se sklicujete na lastnosti komponente. Rekviziti se uporabljajo za prenos podatkov iz nadrejene komponente v eno ali več podrejenih komponent in so podrejeni komponenti samo za branje.

12. Kaj so props.children?

Atribut Props.children vsebuje informacije o vsej vsebini komponente, ki ima začetno in zapiralno oznako. Ti otroci se nanašajo na vse elemente, ki so definirani znotraj trenutne komponente, in so lahko en, več ali noben.

13. Ali lahko posodobite rekvizite v Reactu?

Ne, rekviziti v Reactu so od zgoraj navzdol in so nespremenljivi. To pomeni, da lahko komponenta svojim otrokom pošlje poljubne lastnosti, ne more pa posodobiti svojih rekvizitov. Samo njegov nadrejeni lahko posodobi njegove rekvizite.

14. Kaj je JSX?

JSX je kratica za JavaScript XML. To je razširitev sintakse JavaScript, ki omogoča pisanje HTML-ja v reakcijsko kodo. Brskalnik tako ali tako ne razume JSX, zato ga mora React upodobiti v berljivo kodo HTML.

15. Kakšna je razlika med komponento in elementom

Element je brezdržavna in nespremenljiva definicija virtualnega vozlišča DOM. Vsebuje tip in lastnost, vendar nobenih metod, kot jih ima komponenta. To pomanjkanje metod omogoča hitro.

16. Kaj je stanje v Reactu?

Stanje v Reactu se nanaša na vgrajen objekt v komponenti, ki se uporablja za shranjevanje in upravljanje informacij o tej komponenti. Stanje se lahko sčasoma spremeni in bo tako sprožilo ponovno upodobitev te komponente. Stanje morate definirati v metodi konstruktorja komponente, sicer komponenta postane brez stanja.

17. Kaj je komponenta brez stanja?

Komponenta React brez stanja nima stanja. To pomeni, da ne morete nastaviti njegovega stanja z this.setState() metoda niti ni bila upodobljena. Komponenta brez stanja pa ima lahko pripomočke.

18. Kako posodobite stanje v Reactu

Stanje komponente posodobite tako, da pokličete njeno this.setState() metoda.

19. Razložite Reactov strogi način

Reactov strogi način je orodje, ki pomaga razvijalcu odkriti morebitne težave v aplikaciji z aktiviranjem preverjanj na globlji ravni komponent in poudarjanjem več opozoril. Strogi način je na voljo samo v razvojnem načinu.

20. Kaj pomeni Lifting State Up v Reactu?

To pomeni, da podrejenim komponentam dovolite, da si delijo skupno stanje od svojega nadrejenega, saj je tako stvari lažje upravljati, kot če bi vsaka podrejena komponenta posebej upravljala skupno stanje.

21. Kako posredujete podatke v React?

Podatke posredujete v React z uporabo rekvizitov in povratnih klicev. Reactovi rekviziti so enosmerni, kar omogoča, da lastnosti prehajajo samo od nadrejenih komponent do njihovih otrok. Če želite posredovati podatke iz podrejene komponente v nadrejeno, morate uporabiti funkcijo povratnega klica.

22. Določite Flux v Reactu

Flux je enosmerni koncept za usmerjanje pretoka podatkov v aplikaciji. Enosmernost pomeni, da lahko podatki prehajajo samo od nadrejenih do podrejenih komponent. Flux lahko vključuje tudi več shramb podatkov na aplikacijo.

23. Določite Redux v Reactu

Redux je uporabna odprtokodna knjižnica JavaScript za upravljanje kompleksnih stanj v aplikaciji. Je neodvisen in se lahko uporablja v drugih okvirih, kot je Angular. Za razliko od Fluxa Redux centralizira upravljanje stanja aplikacije in tako olajša gradnjo kompleksnih uporabniških vmesnikov.

24. Kdaj uporabiti Redux?

Reduxa ne potrebujejo vse aplikacije. Vendar je koristno v naslednjih pogojih:

1. Ko imate v svoji aplikaciji velike količine stanj aplikacije
2. Ko je logika vaše aplikacije zapletena
3. Ko ima vaša aplikacija veliko kodno zbirko
4. Ko morate aplikacijo pogosto posodabljati
5. Ko z aplikacijo dela veliko ljudi

25. Kakšna je glavna razlika med Reduxom in Fluxom?

Glavna razlika med obema je v tem, da Redux upravlja vse podatke aplikacije iz ene same trgovine, medtem ko imate lahko pod Fluxom več trgovin.

26. Naštejte komponente Reduxa

Obstajajo 4 glavni deli Reduxa:

1. trgovina – Tukaj shranite stanje aplikacije.
2. Ukrep – To so dogodki, zaradi katerih aplikacija pošlje podatke v trgovino Redux.
3. Reduktor – To je funkcija, ki sprejme trenutno stanje aplikacije in dejanje kot argumenta, nato pa kot rezultat vrne novo stanje.
4. Vmesna programska oprema – Ta funkcija omogoča razvijalcu, da zajame vsa dejanja iz komponente, preden dosežejo reduktorsko funkcijo.

27. Kaj so React Hooks?

Kavlji React so funkcija funkcijskih komponent, ki vam omogočajo dostop do različnih funkcij React, kot so podatki o stanju in posodobitve upodabljanja. Predstavljen je bil v React 16.8.

28. Navedite vrsto kavljev v Reactu

V Reactu je 15+ kavljev, od osnovnih kavljev, kot so useState, useEffect in useContext, do dodatnih kavljev, kot so useCallback, useReducer, useMemo, useRef itd.

29. Kaj so fragmenti?

Fragment React je priročen način za združevanje več podrejenih elementov v komponento, ne da bi jih dodali v DOM. Oznako preprosto definirate z:

<>

or

in naložite vse želene podrejene elemente. Edina razlika je v tem, da kratka različica <> ne sprejema ključev in atributov, dolga pa jih.

30. Naštejte glavne metode paketa react-dom

To sta createPortal() za upodabljanje otrok v zunanji DOM in flushSync() za izpiranje posodobitev. Obstajata tudi metodi render() in hydrate(), ki sta ju od React 18 nadomestili createRoot() in hydrateRoot().

31. Kaj so tipke React?

Ključi so edinstveni identifikatorji, ki jih je najbolje uporabiti za upravljanje seznamov. Tipke olajšajo prepoznavanje posameznih elementov na seznamu in vedo, kdaj je bil vsak element posodobljen, izbrisan ali kakor koli spremenjen.

32. Zakaj so React tipke pomembne?

Ključi so v Reactu pomembni, ker pomagajo pri učinkovitem upodabljanju pravega DOM-a. React je dober, ker poskuša minimizirati, katere komponente ponovno upodablja po dogodku, in uporaba tipk na seznamu preprečuje Reactu, da bi moral znova upodabljati celotne sezname, kar je lahko težava pri velikih seznamih.

33. Kaj je dogodek v Reactu?

Dogodek je vsako dejanje v aplikaciji, ki ga izvede uporabnik ali sistem. Dogodek lahko obsega vse od klika miške ali dotika na mobilnih napravah do spreminjanja velikosti okna, pritiska tipke, vlečenja, fokusa itd.

34. Pojasnite, kaj Sintetični dogodek sredstva

Sintetični dogodek je ovoj okoli izvirnih dogodkov brskalnika, pri čemer je težava v tem, da različni brskalniki različno poimenujejo svoje dogodke. React uporablja sintetične dogodke, da se izogne ​​težavi ustvarjanja več implementacij in metod za vse različne brskalnike. Na ta način React vzdržuje skupna imena za vse različne dogodke brskalnika kot enoten API.

35. Kaj je Webpack?

Webpack je sistem združevanja modulov, ki se uporablja za združevanje in pomanjševanje datotek JavaScript in CSS. Zgrajen je na Node.js in je koristen pri delu z velikim številom datotek ali nekodiranih sredstev, kot so slike in pisave.

36. Kaj je aplikacija create-react-app?

Create-react-app je orodje, ki vam pomaga ustvariti enostransko aplikacijo React v vašem okolju Node.js. Ustvari vse datoteke in mape, ki jih potrebujete za zagon osnovne aplikacije, in jo vzamete od tam. Zahteva različico vozlišča 14.0.0 navzgor in npm od ver. 5.6.

Uporaba je preprosta:

npx create-react-app myNewApp

cd myNewApp

npm začetek

37. Ali lahko z Reactom upodobite strežniško stran?

Da, lahko, čeprav lahko za velike projekte zahteva veliko virov. Upodabljanje na strani strežnika je koristno, saj izboljša uporabniško izkušnjo in SEO. Potrebovali boste okolje Node.js, povezovalnik, kot je Webpack, in okvir, kot je Naprej.js in Remix za upodabljanje aplikacij React med izvajanjem. Rešitev za intenzivno uporabo virov je uporaba statičnega generatorja spletnih mest, kot je na primer Next.js. gatsby.

38. Pojasnite, kaj počne funkcija puščice

Puščična funkcija je preprosto krajši način definiranja funkcij. To je okrajšava ES6, ki nadomešča:

= funkcija() z ()=>.

Na primer:

test = funkcija(){

vrni "To je test";

}

potem postane:

test = () => {

vrni "To je test";

}

ali za enovrstične izjave:

test = () => “To je test”;

39. Kaj je a React usmerjevalnik?

Usmerjevalnik React je knjižnica, ki zagotavlja funkcijo usmerjanja v aplikaciji React. Omogoča preprosto vključitev in uporabo bogatih navigacijskih komponent, ki so lahko zelo koristne za velike ali kompleksne projekte.

40. Katere so glavne prednosti uporabe usmerjevalnika React?

Ustvari različne poti url za vašo aplikacijo in zagotovi vrednosti window.location in objekt zgodovine.

41. Kaj je ComponentWillUnmount()?

To je komponentna metoda, ki se pokliče vsakič, ko bo React uničil komponento. Je prijeten kraj za čiščenje stvari, brisanje časovnikov, preklic omrežnih zahtev in obravnavanje drugih pomembnih težav z deinicializacijo.

42. Kaj je Konstruktor()?

Konstruktor je metoda komponente, ki se kliče med inicializacijo komponente. Običajno se uporablja za inicializacijo lokalnih stanj in za povezovanje metod obdelovalnika dogodkov.

43. Kaj je navidezni DOM?

Navidezni DOM Reacta je lahka kopija DOM-a dejanskega dokumenta HTML. Uporablja se za učinkovito upravljanje in posodabljanje sprememb na pravem DOM-u.

44. Kakšne so prednosti virtualnega DOM pred resničnim DOM?

Navidezni DOM je lahek in hitrejši za upodabljanje kot pravi DOM, zaradi česar je bolj učinkovito najprej upodabljati v navidezni DOM in spreminjati pravi DOM šele, ko je to potrebno. Vsako vozlišče v resničnem DOM-u ima ustrezno komponento v navideznem DOM-u in ko pride do sprememb navidezne komponente po upodabljanju, React nato natančno ve, katero pravo vozlišče HTML posodobiti ali izbrisati.

45. Pojasni izraz Usklajevanje v Reactu

Usklajevanje je Reactova metoda posodabljanja resničnega DOM-a samo, kadar je to potrebno, s preverjanjem posodobljenih različic navideznega DOM-a z razlikovanjem in posodabljanjem samo natančnih vozlišč, ki so se spremenila v resničnem DOM-u.

46. Pojasni izraz Profil v Reactu

Profiler je orodje React, ki pomaga optimizirati aplikacijo tako, da meri, kolikokrat se aplikacija upodablja in koliko časa traja upodabljanje posamezne komponente. To pomaga razvijalcu prepoznati dele aplikacije, ki jih je morda treba optimizirati.

47. Pojasni izraz Ozadje v Reactu

Kontekst je metoda posredovanja podatkov med komponentami React na številnih ravneh, ne da bi morali podatke posredovati skozi vsako raven gnezdenja z uporabo rekvizitov. Najbolje ga je uporabiti za preprosto skupno rabo podatkov s številnimi komponentami, ki ne potrebujejo stalnih posodobitev, kot so informacije o temi in uporabniški podatki. Njegova slaba stran je, da lahko oteži ponovno uporabo komponent.

48. Pojasni izraz Montaža v Reactu

Montaža v React je postopek pripenjanja komponente kot vozlišča v DOM. Odstranjevanje je nasprotno.

49. Pojasni izraz Rendering v Reactu

Upodabljanje je postopek risanja komponente. Običajno se zgodi, ko se spremeni stanje komponente in mora React prerisati uporabniški vmesnik. Če se komponenta med upodabljanjem ponovno nariše, se na novo narišejo tudi njene podrejene komponente.

50. Pojasni izraz Meja napake v Reactu

Meja napake se nanaša na komponento React, ki lovi napake JavaScript iz svojih podrejenih komponent, beleži napake in prikaže nadomestni uporabniški vmesnik namesto vozlišč, ki so se zrušila. Meje napak so bile uvedene v React 16.

zaključek

Prišli smo do konca tega seznama 50 najpomembnejših vprašanj za intervju React, ki jih morate vedeti, in upajmo, da že imate dobro predstavo o tem, kaj lahko pričakujete.

Upoštevajte tudi, da nič ne ostane enako in da se vaš razgovor lahko obrne v katero koli smer. Zato se morate še naprej učiti in biti na tekočem.