Top 50 de întrebări și răspunsuri la interviu React pe care trebuie să le cunoașteți

Dezvoltatorii ReactJS sunt foarte căutați și există un motiv întemeiat pentru asta. Dar va trebui să vă dovediți competența în cadru pentru a obține postul.

Următoarele sunt întrebări frecvente de dezvoltare React și răspunsurile lor de care ar trebui să le cunoașteți. Include totul, de la elementele de bază la subiecte mai avansate.

1. Ce este React?

React este o bibliotecă JavaScript gratuită și open-source pentru dezvoltarea interfeței cu utilizatorul, care utilizează componente pentru a crea rezultate pentru aplicații cu o singură pagină. React a fost dezvoltat de Facebook (Meta) și este întreținut de o comunitate de dezvoltatori.

2. Enumerați caracteristicile importante ale React

Cele mai importante caracteristici ale React includ:

1. Usor de folosit
2. Dezvoltare rapida
3. Utilizarea componentelor
4. JSX
5. DOM-ul virtual
6. De înaltă performanță
7. Legare de date unidirecțională

3. Unde este depozitul de proiecte React?

React este un mono-depozitiv care trăiește la https://github.com/facebook/react. A fi un mono-depozitar înseamnă că tot codul său și alte surse sunt stocate în același loc pentru o dezvoltare și o gestionare mai ușoară.

4. Care este versiunea stabilă actuală de React?

Cea mai recentă versiune stabilă de React din 14 iunie 2022 este 18.2.0.

5. Prezentați diferențele dintre React Native și ReactJS

React și ReactJS sunt aceleași, în timp ce React Native este construit pe React. Pentru diferențele dintre ele, React este folosit pentru a crea interfețe de utilizator dinamice și receptive pentru aplicații web, în ​​timp ce React Native este conceput pentru a construi aplicații ca aplicații mobile.

6. Care este diferența dintre un element și o componentă?

Un element React este un obiect simplu și imuabil creat pentru a reprezenta un nod DOM. Fiind imuabil înseamnă că nu poate fi schimbat odată ce a fost creat, deoarece se redă către DOM. O componentă React, pe de altă parte, este mutabilă și produce o ieșire JSX odată redată.

7. Cum se creează o componentă?

Există două moduri de a crea o componentă în React: 1.) Componente de funcție și 2.) Componente de clasă. După cum sugerează numele, o componentă de funcție este creată folosind o declarație de funcție, în timp ce o componentă de clasă este creată folosind o declarație de clasă.

//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. Enumerați cele 4 etape ale unei componente React

O componentă React trece prin următoarele 4 etape în ciclul său de viață:

1. Stadiul inițial – Construcția componentelor în starea implicită cu recuzită inițială
2. Faza de montare – Redarea JSX a componentei
3. Faza de actualizare – Modificări ale stării componentelor și redesenarea aplicației
4. Faza de demontare – Îndepărtarea componentelor din DOM

9. Explicați ce înseamnă o componentă de ordin superior

O componentă de ordin superior (HOC) este o metodologie React pentru crearea componentelor. Utilizează o componentă existentă pentru a crea una nouă cu funcționalitate suplimentară. Cu alte cuvinte, un HOC este o funcție care ia o componentă ca argument și returnează o componentă nouă cu caracteristici adăugate.

10. Ce sunt componentele controlate și necontrolate?

O componentă controlată este o componentă React care își ia valoarea prin elemente de recuzită și notifică sistemul cu privire la orice modificări prin apeluri inverse. Este controlat de o componentă părinte care îl gestionează de stat și transmite valorile ca elemente de recuzită la componenta controlată. O componentă necontrolată, pe de altă parte, își gestionează starea și va trebui să interogați HOTĂRÂREA folosind ref pentru a-și obține valoarea.

11. Ce sunt elementele de recuzită în React?

Props în React este doar un mod simplu de a spune proprietăți și, prin aceasta, vă referiți la proprietățile unei componente. Elementele de recuzită sunt folosite pentru a transmite date de la o componentă părinte la una sau mai multe componente secundare și sunt doar în citire către componenta secundară.

12. Ce sunt recuzita.copiii?

Atributul Props.children conține informații despre tot conținutul unei componente care are o etichetă de deschidere și de închidere. Acești copii se referă la toate elementele care sunt definite în interiorul componentei curente și pot fi unul, mai multe sau niciunul.

13. Puteți actualiza elementele de recuzită în React?

Nu, elementele de recuzită din React sunt de sus în jos și imuabile. Aceasta înseamnă că o componentă poate trimite orice proprietăți care îi place copiilor săi, dar nu își poate actualiza elementele de recuzită. Numai părintele său își poate actualiza recuzita.

14. Ce este JSX?

JSX înseamnă JavaScript XML. Este o extensie de sintaxă JavaScript care face posibilă scrierea HTML în codul react. Browserul oricum nu înțelege JSX, așa că React trebuie să îl redeze în cod HTML care poate fi citit.

15. Care este diferența dintre o componentă și un element

Un element este o definiție fără stat și imuabilă a unui nod DOM virtual. Conține atât un tip, cât și o proprietate, dar nu există metode precum o componentă. Această lipsă de metode îl face rapid.

16. Ce este o stare în React?

O stare în React se referă la un obiect încorporat într-o componentă care este folosită pentru a păstra și gestiona informații despre acea componentă. O stare se poate schimba în timp și va declanșa astfel o redare a acelei componente. Trebuie să definiți starea în metoda constructorului componentei, altfel componenta devine apatridă.

17. Ce este o componentă apatridă?

O componentă React fără stat nu are o stare. Aceasta înseamnă că nici nu îi puteți seta starea cu this.setState() metoda și nici nu a fost redată. O componentă apatridă poate avea totuși elemente de recuzită.

18. Cum actualizezi o stare în React

Actualizați starea unei componente apelând-o this.setState() metodă.

19. Explicați modul strict al lui React

Modul strict al React este un instrument care ajută dezvoltatorul să descopere potențiale probleme în aplicație, activând verificări la nivel mai profund asupra componentelor și evidențiind mai multe avertismente. Modul strict este disponibil numai în modul de dezvoltare.

20. Ce înseamnă Lifting State Up în React?

Înseamnă să permiteți componentelor copil să împărtășească o stare comună de la părintele lor, deoarece acest lucru face lucrurile mai ușor de gestionat decât pentru fiecare componentă copil să gestioneze individual starea comună.

21. Cum transferați datele în React?

Transmiteți date în React folosind elemente de recuzită și apeluri inverse. Elementele de recuzită React sunt unidirecționale, permițând proprietăților să treacă numai de la componentele părinte la copiii lor. Pentru a transmite date de la o componentă copil către un părinte, trebuie să utilizați o funcție de apel invers.

22. Definiți Flux în React

Flux este un concept unidirecțional pentru direcționarea fluxului de date într-o aplicație. Fiind unidirecțional înseamnă că datele pot trece doar de la componentele părinte la componentele copiilor. Flux poate include, de asemenea, mai multe magazine de date per aplicație.

23. Definiți Redux în React

Redux este o bibliotecă JavaScript open-source utilă pentru gestionarea stărilor complexe într-o aplicație. Este independent și poate fi folosit în alte cadre precum Angular. Spre deosebire de Flux, Redux centralizează gestionarea stării unei aplicații, facilitând astfel construirea de interfețe de utilizare complexe.

24. Când ar trebui să utilizați Redux?

Nu toate aplicațiile au nevoie de Redux. Dar este util în următoarele condiții:

1. Când aveți cantități mari de stări ale aplicației în aplicația dvs
2. Când logica aplicației dvs. este complexă
3. Când aplicația dvs. are o bază de cod mare
4. Când trebuie să actualizați frecvent aplicația
5. Când aveți mulți oameni care lucrează la aplicație

25. Care este diferența majoră dintre Redux și Flux?

Diferența majoră dintre cele două este că Redux gestionează toate datele aplicației dintr-un singur magazin, în timp ce puteți avea mai multe magazine sub Flux.

26. Listați componentele Redux

Există 4 părți majore ale Redux:

1. Magazin – Aici stocați starea aplicației.
2. Acțiune – Acestea sunt evenimente care fac ca aplicația să trimită date către magazinul Redux.
3. reductor – Aceasta este o funcție care acceptă starea curentă a aplicației și o acțiune ca argumente, apoi returnează o stare nouă ca rezultat.
4. middleware – Această caracteristică permite unui dezvoltator să captureze toate acțiunile dintr-o componentă înainte ca acestea să ajungă la funcția de reducere.

27. Ce sunt React Hooks?

Cârligele React sunt o caracteristică a componentelor funcționale care vă permit accesul la diferite caracteristici React, cum ar fi datele de stare și actualizările de redare. A fost introdus în React 16.8.

28. Enumerați tipul de cârlige în React

Există peste 15 cârlige în React, pornind de la cârligele de bază precum useState, useEffect și useContext până la cârlige suplimentare precum useCallback, useReducer, useMemo, useRef și așa mai departe.

29. Ce sunt fragmentele?

Un fragment React este o modalitate convenabilă de a grupa mai multe elemente copil într-o componentă, fără a le adăuga la DOM. Pur și simplu definiți eticheta folosind:

<>

or

și încărcați toate elementele copil pe care le doriți în interior. Singura diferență este că versiunea scurtă <> nu acceptă chei și atribute, în timp ce versiunea lungă acceptă.

30. Enumerați principalele metode ale pachetului react-dom

Acestea sunt createPortal() pentru redarea copiilor într-un DOM extern și flushSync() pentru spălarea actualizărilor. Există și metodele render() și hydrate(), care au fost înlocuite cu createRoot() și hydrateRoot() începând cu React 18.

31. Ce sunt cheile React?

Cheile sunt identificatori unici care sunt cel mai bine utilizate pentru a gestiona liste. Tastele facilitează identificarea elementelor individuale dintr-o listă și știi când fiecare articol a fost actualizat, șters sau modificat în vreun fel.

32. De ce sunt importante tastele React?

Cheile sunt importante în React, deoarece ajută la redarea eficientă a DOM-ului real. React este bun, deoarece încearcă să minimizeze componentele pe care le redă din nou după un eveniment, iar utilizarea tastelor dintr-o listă împiedică React să fie nevoit să redea liste întregi, ceea ce poate fi o problemă cu listele mari.

33. Ce este un eveniment în React?

Un eveniment este orice acțiune dintr-o aplicație care provine fie de la utilizator, fie de la sistem. Un eveniment poate varia de la un clic de mouse sau o atingere pe dispozitive mobile la o redimensionare a ferestrei, apăsarea tastelor, tragerea, focalizarea și așa mai departe.

34. Explica ce Eveniment sintetic Mijloace

Un eveniment sintetic este un înveliș în jurul evenimentelor native ale unui browser, problema fiind că diferitele browsere își numesc evenimentele în mod diferit. React folosește evenimente sintetice pentru a evita problema de a crea mai multe implementări și metode pentru toate browserele diferite. În acest fel, React menține nume comune pentru toate evenimentele din browser ca un API unificat.

35. Ce este Webpack?

Webpack este un sistem de grupare a modulelor folosit pentru a combina și reduce fișierele JavaScript și CSS. Este construit pe Node.js și este util atunci când lucrați cu un număr mare de fișiere sau materiale non-cod, cum ar fi imagini și fonturi.

36. Ce este aplicația create-react?

Create-react-app este un instrument care vă ajută să creați o aplicație React cu o singură pagină în mediul dvs. Node.js. Acesta generează toate fișierele și folderele de care aveți nevoie pentru a porni o aplicație de bază și o luați de acolo. Necesită versiunea Node 14.0.0 în sus și npm de la ver. 5.6.

Utilizarea este simplă:

npx create-react-app myNewApp

cd myNewApp

npm începe

37. Puteți reda partea de server cu React?

Da, puteți, deși poate obține resurse intensive pentru proiecte mari. Redarea pe server este utilă, deoarece îmbunătățește experiența utilizatorului și SEO. Veți avea nevoie de un mediu Node.js, un bundler precum Webpack și un cadru ca Next.js și Remix pentru a reda aplicațiile React în timpul rulării. O soluție pentru utilizarea intensivă a resurselor este utilizarea unui generator de site static, cum ar fi Next.js Gatsby.

38. Explicați ce face o funcție săgeată

O funcție săgeată este pur și simplu un mod mai scurt de definire a funcțiilor. Este o prescurtare ES6 care înlocuiește:

= functie() implementate cu () =>.

De exemplu:

test = function(){

returnează „Acesta este un test”;

}

apoi devine:

test = () => {

returnează „Acesta este un test”;

}

sau pentru declarații cu o singură linie:

test = () => „Acesta este un test”;

39. Ce este a ReactRouter?

React router este o bibliotecă care oferă funcționalitate de rutare într-o aplicație React. Facilitează includerea și utilizarea componentelor de navigare bogate, care pot fi foarte utile pentru proiecte mari sau complexe.

40. Care sunt principalele avantaje ale utilizării React Router?

Acesta creează căi URL diferite pentru aplicația dvs. și oferă valori window.location și un obiect istoric.

41. Ce este ComponentWillUnmount()?

Aceasta este o metodă de componentă care este apelată ori de câte ori React este pe cale să distrugă componenta. Este un loc frumos pentru a curăța lucrurile, a șterge temporizatoarele, a anula solicitările de rețea și a gestiona alte probleme importante de deinițializare.

42. Ce este Constructorul()?

Constructorul este metoda componentei care este apelată în timpul inițializării componentei. Este folosit de obicei pentru inițializarea stărilor locale și pentru legarea metodelor de gestionare a evenimentelor.

43. Ce este Virtual DOM?

DOM-ul virtual al lui React este o copie ușoară a DOM-ului real al documentului HTML. Este folosit pentru gestionarea eficientă și actualizarea modificărilor pe DOM-ul real.

44. Care sunt avantajele DOM virtual față de DOM real?

DOM-ul virtual este ușor și mai rapid de randat decât DOM-ul real, iar acest lucru face mai eficient să randați mai întâi în DOM-ul virtual și să faceți modificări la DOM-ul real doar atunci când este nevoie. Fiecare nod de pe DOM-ul real are o componentă corespunzătoare pe DOM-ul virtual și, odată ce apar modificări la o componentă virtuală după randare, React știe exact ce nod HTML real să actualizeze sau să ștergă.

45. Explicați termenul Reconciliere în React

Reconcilierea este metoda React de a actualiza DOM-ul real numai atunci când este necesar, prin verificarea versiunilor actualizate ale DOM-ului virtual prin diferențiere și doar actualizarea nodurilor exacte care s-au schimbat pe DOM-ul real.

46. Explicați termenul profil în React

Profiler este un instrument React care ajută la optimizarea unei aplicații, măsurând de câte ori este redată o aplicație și cât durează fiecare componentă pentru randare. Acest lucru ajută dezvoltatorul să identifice părți ale aplicației care ar putea avea nevoie de optimizare.

47. Explicați termenul Context în React

Contextul este o metodă de transmitere a datelor între componentele React la mai multe niveluri fără a fi nevoie să treacă datele prin fiecare nivel de imbricare folosind elemente de recuzită. Cel mai bine este folosit pentru partajarea ușoară a datelor cu multe componente care nu necesită actualizări constante, cum ar fi informații despre teme și datele utilizatorului. Dezavantajul său este că poate face dificilă reutilizarea componentelor.

48. Explicați termenul Montare în React

Montarea în React este procesul de atașare a unei componente ca nod la DOM. Demontarea este invers.

49. Explicați termenul de redare în React

Redarea este procesul de desenare a unei componente. De obicei, apare atunci când starea componentei se schimbă și React trebuie să redeseneze interfața de utilizare. Dacă o componentă este redesenată în timpul redării, atunci componentele sale secundare sunt redesenate și ele.

50. Explicați termenul Limită de eroare în React

Limita erorii se referă la o componentă React care captează erorile JavaScript din componentele sale secundare, înregistrează erorile și afișează o interfață de utilizare alternativă în locul nodurilor care s-au prăbușit. Limitele de eroare au fost introduse în React 16.

Concluzie

Am ajuns la sfârșitul acestei liste cu primele 50 de întrebări de interviu React pe care trebuie să le cunoașteți și, sperăm, că ar trebui să aveți o idee bună despre ce vă puteți aștepta până acum.

De asemenea, trebuie să rețineți că nimic nu rămâne la fel și interviul poate lua orice direcție. Prin urmare, ar trebui să continuați să studiați și să fiți la curent.