50 populārākie React Intervija jautājumi un atbildes

ReactJS izstrādātāji ir ļoti pieprasīti, un tam ir labs iemesls. Bet, lai iegūtu darbu, jums būs jāpierāda sava prasme šajā sistēmā.

Tālāk ir sniegti bieži uzdotie React izstrādes jautājumi un atbildes uz tiem, kas jums jāzina. Tas ietver visu, sākot no pamatiem līdz sarežģītākām tēmām.

1. Kas ir React?

React ir bezmaksas atvērtā koda JavaScript bibliotēka lietotāja interfeisa izstrādei, kas izmanto komponentus, lai izveidotu vienas lapas lietojumprogrammu izvadi. React izstrādāja Facebook (Meta), un to uztur izstrādātāju kopiena.

2. Uzskaitiet svarīgās React funkcijas

Svarīgākās React funkcijas ietver:

1. Vienkārša lietošana
2. Ātra attīstība
3. Komponentu izmantošana
4. Jsx
5. Virtuālais DOM
6. Augstas veiktspējas
7. Vienvirziena datu saistīšana

3. Kur atrodas React projektu repozitorijs?

React ir monokrātuve, kas dzīvo plkst https://github.com/facebook/react. Viena repozitorija statuss nozīmē, ka viss tā kods un citi avoti tiek glabāti vienā vietā, lai atvieglotu attīstību un pārvaldību.

4. Kāda ir pašreizējā stabilā React versija?

Pašreizējā stabilā React versija no 14. gada 2022. jūnija ir 18.2.0.

5. Norādiet atšķirības starp React Native un ReactJS

React un ReactJS ir vienādi, savukārt React Native ir balstīts uz React. To atšķirību dēļ React tiek izmantots, lai izveidotu dinamiskas un atsaucīgas lietotāja saskarnes tīmekļa lietojumprogrammām, savukārt React Native ir paredzēts lietojumprogrammu veidošanai kā mobilajām lietotnēm.

6. Kāda ir atšķirība starp elementu un komponentu?

React elements ir vienkāršs un nemainīgs objekts, kas izveidots, lai attēlotu DOM mezglu. Tas, ka tas ir nemainīgs, nozīmē, ka to nevar mainīt, kad tas ir izveidots, jo tas tiek renderēts DOM. No otras puses, React komponents ir mainīgs un pēc renderēšanas rada JSX izvadi.

7. Kā jūs izveidojat komponentu?

Ir divi veidi, kā izveidot komponentu programmā React: 1.) Funkciju komponenti un 2.) klases komponenti. Kā norāda nosaukumi, funkcijas komponents tiek izveidots, izmantojot funkcijas deklarāciju, savukārt klases komponents tiek izveidots, izmantojot klases deklarāciju.

//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. Uzskaitiet 4 reakcijas komponenta posmus

React komponents savā dzīves ciklā iziet šādus 4 posmus:

1. Sākotnējais posms – Komponentu konstrukcija noklusējuma stāvoklī ar sākotnējiem balstiem
2. Montāžas fāze – komponenta JSX renderēšana
3. Atjaunināšanas fāze – Komponentu stāvokļa izmaiņas un lietojumprogrammas pārzīmēšana
4. Atvienošanas fāze – Komponentu noņemšana no DOM

9. Paskaidrojiet, ko nozīmē augstākas kārtas komponents

Augstākas kārtas komponents (HOC) ir React metodoloģija komponentu izveidei. Tas izmanto esošu komponentu, lai izveidotu jaunu ar papildu funkcionalitāti. Citiem vārdiem sakot, HOC ir funkcija, kas izmanto komponentu kā argumentu un atgriež jaunu komponentu ar pievienotām funkcijām.

10. Kas ir kontrolētās un nekontrolējamās sastāvdaļas?

Kontrolētais komponents ir React komponents, kas iegūst savu vērtību, izmantojot rekvizītus, un paziņo sistēmai par jebkādām izmaiņām, izmantojot atzvanīšanu. To kontrolē vecākkomponents, kas to pārvalda bija un nodod vērtības kā rekvizītus kontrolētajam komponentam. No otras puses, nekontrolēts komponents pārvalda savu stāvokli, un jums būs jāveic vaicājums SPRIEDUMS izmantojot ref lai iegūtu tās vērtību.

11. Kas ir Props in React?

Props in React ir tikai vienkāršs veids, kā pateikt rekvizītus, un ar to jūs domājat par komponenta īpašībām. Rekvizīti tiek izmantoti, lai pārsūtītu datus no vecākkomponenta vienam vai vairākiem pakārtotajiem komponentiem, un tie ir tikai lasāmi pakārtotajam komponentam.

12. Kas ir rekvizīti.bērni?

Atribūts Props.children satur informāciju par visu tā komponenta saturu, kuram ir sākuma un beigu atzīme. Šie bērni attiecas uz visiem elementiem, kas ir definēti pašreizējā komponentā, un var būt viens, daudzi vai neviens.

13. Vai varat atjaunināt rekvizītus programmā React?

Nē, React rekvizīti ir no augšas uz leju un ir nemainīgi. Tas nozīmē, ka komponents var nosūtīt saviem bērniem jebkurus rekvizītus, kas tam patīk, bet nevar atjaunināt savus rekvizītus. Tikai tās vecāki var atjaunināt tā rekvizītus.

14. Kas ir JSX?

JSX apzīmē JavaScript XML. Tas ir JavaScript sintakses paplašinājums, kas ļauj rakstīt HTML reakcijas kodā. Pārlūkprogramma tik un tā nesaprot JSX, tāpēc React ir jāveido tas lasāmā HTML kodā.

15. Kāda ir atšķirība starp komponentu un elementu

Elements ir bezvalsts un nemainīga virtuālā DOM mezgla definīcija. Tajā ir gan veids, gan rekvizīts, taču nav tādu metožu kā komponentam. Šis metožu trūkums padara to ātru.

16. Kas ir React stāvoklis?

React statuss attiecas uz komponentā iebūvētu objektu, kas tiek izmantots, lai turētu un pārvaldītu informāciju par šo komponentu. Stāvoklis laika gaitā var mainīties un tādējādi izraisīs šī komponenta atkārtotu renderēšanu. Stāvoklis ir jādefinē komponenta konstruktora metodē, pretējā gadījumā komponents kļūst bezstāvoklis.

17. Kas ir bezvalstniecības komponents?

Bezvalsts React komponentam nav stāvokļa. Tas nozīmē, ka jūs nevarat iestatīt tā stāvokli ar this.setState() metode, kā arī tā nav atveidota. Bezvalsts komponentam tomēr var būt rekvizīti.

18. Kā atjaunināt statusu programmā React

Jūs atjaunināt komponenta stāvokli, izsaucot to this.setState() metode.

19. Izskaidrojiet React stingro režīmu

React stingrais režīms ir rīks, kas palīdz izstrādātājam atklāt iespējamās problēmas lietojumprogrammā, aktivizējot komponentu padziļinātas pārbaudes un izceļot vairāk brīdinājumu. Stingrais režīms ir pieejams tikai izstrādes režīmā.

20. Ko nozīmē reakcijas stāvokļa pacelšana?

Tas nozīmē ļaut bērna komponentiem koplietot vecāku stāvokli, jo tas padara lietas vieglāk pārvaldāmas nekā katram pakārtotajam komponentam atsevišķi pārvaldīt kopējo stāvokli.

21. Kā jūs nododat datus reakcijā?

Jūs nododat datus programmā React, izmantojot rekvizītus un atzvanus. React rekvizīti ir vienvirziena, ļaujot rekvizītus nodot bērniem tikai no vecāku komponentiem. Lai pārsūtītu datus no pakārtotā komponenta vecākam, ir jāizmanto atzvanīšanas funkcija.

22. Definējiet Plūdums sadaļā Reakt

Flux ir vienvirziena koncepcija datu plūsmas virzīšanai lietojumprogrammā. Vienvirziena nozīme nozīmē, ka datus var pārsūtīt tikai no vecākiem komponentiem uz bērniem. Flux var ietvert arī vairākus datu krātuves katrai lietotnei.

23. Definējiet Redux sadaļā Reakt

Redux ir noderīga atvērtā pirmkoda JavaScript bibliotēka sarežģītu stāvokļu pārvaldībai lietojumprogrammā. Tas ir neatkarīgs, un to var izmantot citās sistēmās, piemēram, Angular. Atšķirībā no Flux, Redux centralizē lietojumprogrammas stāvokļa pārvaldību, tādējādi atvieglojot sarežģītu lietotāja saskarņu izveidi.

24. Kad vajadzētu lietot Redux?

Ne visām lietotnēm ir nepieciešams Redux. Bet tas ir noderīgi šādos apstākļos:

1. Ja jūsu lietotnē ir liels daudzums lietojumprogrammu statusu
2. Ja jūsu lietotnes loģika ir sarežģīta
3. Ja jūsu lietotnei ir liela kodu bāze
4. Kad jums ir bieži jāatjaunina lietotne
5. Ja pie lietotnes strādā daudz cilvēku

25. Kāda ir galvenā atšķirība starp Redux un Flux?

Galvenā atšķirība starp abiem ir tā, ka Redux pārvalda visus lietojumprogrammu datus no viena veikala, savukārt jums var būt vairāki veikali sadaļā Flux.

26. Uzskaitiet Redux sastāvdaļas

Ir 4 galvenās Redux daļas:

1. veikals – Šeit tiek saglabāts lietojumprogrammas stāvoklis.
2. Darbība - Šie ir notikumi, kuru dēļ lietotne sūta datus uz Redux veikalu.
3. reduktoru – Šī ir funkcija, kas pieņem pašreizējo lietotnes stāvokli un darbību kā argumentus, un pēc tam atgriež jaunu stāvokli.
4. starpprogrammatūra - Šī funkcija ļauj izstrādātājam tvert visas darbības no komponenta, pirms tās sasniedz reduktora funkciju.

27. Kas ir React Hooks?

React āķi ir funkciju komponentu līdzeklis, kas ļauj piekļūt dažādiem React līdzekļiem, piemēram, stāvokļa datiem un renderēšanas atjauninājumiem. Tas tika ieviests React 16.8.

28. Norādiet āķu veidus programmā React

Programmā React ir vairāk nekā 15 āķi, sākot no pamata āķiem, piemēram, useState, useEffect un useContext, līdz papildu āķiem, piemēram, useCallback, useReducer, useMemo, useRef un tā tālāk.

29. Kas ir fragmenti?

React fragments ir ērts veids, kā komponentā grupēt vairākus pakārtotos elementus, nepievienojot tos DOM. Vienkārši definējiet tagu, izmantojot:

<>

or

un ielādējiet visus vajadzīgos bērnu elementus. Vienīgā atšķirība ir tā, ka saīsinātā versija <> nepieņem atslēgas un atribūtus, bet garā versija to pieņem.

30. Uzskaitiet galvenās react-dom paketes metodes

Tie ir createPortal() bērnu atveidošanai ārējā DOM un flushSync() atjauninājumu izskalošanai. Ir arī render() un hydrate() metodes, kuras kopš React 18 ir aizstātas ar createRoot() un hydrateRoot().

31. Kas ir reaģēšanas atslēgas?

Atslēgas ir unikāli identifikatori, kurus vislabāk izmantot sarakstu pārvaldīšanai. Taustiņi ļauj viegli identificēt atsevišķus vienumus sarakstā un zināt, kad katrs vienums ir atjaunināts, dzēsts vai jebkādā veidā mainīts.

32. Kāpēc React atslēgas ir svarīgas?

Atslēgas ir svarīgas React, jo tās palīdz efektīvi atveidot reālo DOM. React ir labs, jo tas mēģina samazināt tos komponentus, kuri tiek atkārtoti renderēti pēc notikuma, un, izmantojot atslēgas sarakstā, React nav nepieciešams atkārtoti renderēt veselus sarakstus, kas var būt problēma ar lieliem sarakstiem.

33. Kas ir notikums reaģēšanā?

Notikums ir jebkura darbība lietotnē, ko veic lietotājs vai sistēma. Notikums var būt no peles klikšķa vai pieskāriena mobilajās ierīcēs līdz loga izmēra maiņai, taustiņu nospiešanai, vilkšanai, fokusēšanai un tā tālāk.

34. Paskaidrojiet ko Sintētiskais pasākums līdzeklis

Sintētiskais notikums ir pārlūkprogrammas vietējo notikumu iesaiņojums, un problēma ir tā, ka dažādas pārlūkprogrammas savus notikumus nosauc atšķirīgi. React izmanto sintētiskus notikumus, lai izvairītos no problēmām, kas saistītas ar vairāku ieviešanu un metožu izveidi visām dažādajām pārlūkprogrammām. Tādā veidā React saglabā kopējos nosaukumus visiem dažādajiem pārlūkprogrammas notikumiem kā vienotu API.

35. Kas ir Webpack?

Webpack ir moduļu komplektēšanas sistēma, ko izmanto JavaScript un CSS failu apvienošanai un samazināšanai. Tas ir izveidots, izmantojot Node.js, un ir noderīgs, strādājot ar lielu skaitu failu vai ar kodu nesaistītiem līdzekļiem, piemēram, attēliem un fontiem.

36. Kas ir izveidot-reaģēt-lietotne?

Create-react-app ir rīks, kas palīdz izveidot vienas lapas React lietojumprogrammu jūsu Node.js vidē. Tas ģenerē visus failus un mapes, kas jums nepieciešami, lai palaistu pamata lietotni, un jūs to paņemat no turienes. Tam nepieciešama Node versija 14.0.0 un jaunāka versija un npm no ver. 5.6.

Lietošana ir vienkārša:

npx izveidot-reaģēt-lietotni myNewApp

cd myNewApp

npm sākums

37. Vai varat renderēt servera pusi, izmantojot React?

Jā, jūs varat, lai gan tas var būt resursietilpīgs lieliem projektiem. Servera puses renderēšana ir noderīga, jo tā uzlabo lietotāja pieredzi un SEO. Jums būs nepieciešama Node.js vide, komplektētājs, piemēram, Webpack, un ietvars, piemēram Next.js un Remix lai renderētu React lietotnes izpildlaikā. Risinājums intensīvai resursu izmantošanai ir izmantot statisku vietņu ģeneratoru, piemēram, uz Next.js balstītu Gatsbijs.

38. Paskaidrojiet, ko dara bultiņas funkcija

Bultiņas funkcija ir vienkārši īsāks funkciju definēšanas veids. Tas ir ES6 saīsinājums, kas aizstāj:

= funkcija () ar ()=>.

Piemēram:

tests = funkcija(){

atgriezt “Tas ir pārbaudījums”;

}

tad kļūst:

tests = () => {

atgriezt “Tas ir pārbaudījums”;

}

vai vienas rindiņas paziņojumiem:

tests = () => “Tas ir tests”;

39. Kas ir a Reaģēt maršrutētāju?

React maršrutētājs ir bibliotēka, kas nodrošina maršrutēšanas funkcionalitāti React lietotnē. Tas ļauj viegli iekļaut un izmantot bagātīgus navigācijas komponentus, kas var būt ļoti noderīgi lielos vai sarežģītos projektos.

40. Kādas ir galvenās React Router izmantošanas priekšrocības?

Tas jūsu lietotnei izveido dažādus URL ceļus un nodrošina window.location vērtības un vēstures objektu.

41. Kas ir ComponentWillUnmount()?

Šī ir komponenta metode, kas tiek izsaukta ikreiz, kad React gatavojas iznīcināt komponentu. Tā ir jauka vieta, kur iztīrīt lietas, notīrīt taimerus, atcelt tīkla pieprasījumus un risināt citas svarīgas deinitializācijas problēmas.

42. Kas ir konstruktors()?

Konstruktors ir komponenta metode, kas tiek izsaukta komponenta inicializācijas laikā. To parasti izmanto vietējo stāvokļu inicializācijai un notikumu apstrādātāja metožu saistīšanai.

43. Kas ir virtuālais DOM?

React virtuālais DOM ir viegla faktiskā HTML dokumenta DOM kopija. To izmanto efektīvai pārvaldībai un izmaiņu atjaunināšanai reālajā DOM.

44. Kādas ir virtuālā DOM priekšrocības salīdzinājumā ar reālo DOM?

Virtuālais DOM ir viegls un ātrāk renderējams nekā īstais DOM, un tas padara efektīvāku vispirms atveidot virtuālajā DOM un tikai nepieciešamības gadījumā veikt izmaiņas reālajā DOM. Katram reālā DOM mezglam ir atbilstošs komponents virtuālajā DOM, un, tiklīdz virtuālajā komponentā pēc renderēšanas ir veiktas izmaiņas, React precīzi zina, kuru reālo HTML mezglu atjaunināt vai dzēst.

45. Izskaidrojiet terminu Saskaņošana sadaļā Reakt

Saskaņošana ir React metode reālā DOM atjaunināšanai tikai nepieciešamības gadījumā, pārbaudot atjauninātās virtuālā DOM versijas, izmantojot diferenciāciju, un atjauninot tikai precīzus mezglus, kas mainījušies reālajā DOM.

46. Izskaidrojiet terminu Profils sadaļā Reakt

Profiler ir React rīks, kas palīdz optimizēt lietotni, mērot, cik reižu lietojumprogramma tiek renderēta un cik ilgs laiks nepieciešams katra komponenta renderēšanai. Tas palīdz izstrādātājam noteikt lietojumprogrammas daļas, kurām var būt nepieciešama optimizācija.

47. Izskaidrojiet terminu konteksts sadaļā Reakt

Konteksts ir metode datu pārsūtīšanai starp React komponentiem daudzos līmeņos, nenododot datus katrā ligzdošanas līmenī, izmantojot rekvizītus. To vislabāk izmantot ērtai datu koplietošanai ar daudziem komponentiem, kuriem nav nepieciešami pastāvīgi atjauninājumi, piemēram, motīvu informācija un lietotāja dati. Tās mīnuss ir tāds, ka tas var apgrūtināt komponentu atkārtotu izmantošanu.

48. Izskaidrojiet terminu Montāža sadaļā Reakt

Montāža programmā React ir process, kurā komponents tiek pievienots kā mezgls DOM. Atvienošana ir pretēja.

49. Izskaidrojiet terminu atveidošana sadaļā Reakt

Renderēšana ir komponenta zīmēšanas process. Tas parasti notiek, kad mainās komponenta stāvoklis un React ir jāpārzīmē lietotāja saskarne. Ja komponents tiek pārzīmēts renderēšanas laikā, tiek pārzīmēti arī tā pakārtotie komponenti.

50. Izskaidrojiet terminu Kļūdas robeža sadaļā Reakt

Kļūdas robeža attiecas uz React komponentu, kas uztver JavaScript kļūdas no saviem pakārtotajiem komponentiem, reģistrē kļūdas un avarējušo mezglu vietā parāda rezerves lietotāja interfeisu. React 16 tika ieviestas kļūdu robežas.

Secinājumi

Esam sasnieguši 50 populārāko React intervijas jautājumu saraksta beigas, un, cerams, jums jau tagad būs labs priekšstats par to, ko jūs varat sagaidīt.

Ņemiet vērā arī to, ka nekas nepaliek nemainīgs un jūsu intervija var virzīties jebkurā virzienā. Tāpēc jums ir jāturpina mācīties un sekot līdzi jaunumiem.