50 svarbiausių „React Interviu“ klausimų ir atsakymų, kuriuos būtina žinoti

„ReactJS“ kūrėjai yra labai paklausūs ir tam yra rimta priežastis. Tačiau norėdami gauti darbą, turėsite įrodyti savo įgūdžius šioje sistemoje.

Toliau pateikiami dažnai užduodami „React“ kūrimo klausimai ir jų atsakymai, kuriuos turėtumėte žinoti. Tai apima viską nuo pagrindų iki sudėtingesnių temų.

1. Kas yra React?

„React“ yra nemokama atvirojo kodo „JavaScript“ biblioteka, skirta vartotojo sąsajai kurti, kuri naudoja komponentus, kad sukurtų vieno puslapio programų išvestį. „React“ sukūrė „Facebook“ („Meta“), o ją prižiūri kūrėjų bendruomenė.

2. Išvardykite svarbias React savybes

Svarbiausios „React“ funkcijos:

1. Lengva naudoti
2. Greitas vystymasis
3. Komponentų naudojimas
4. JSX
5. Virtualus DOM
6. Aukštos kokybės
7. Vienpusis duomenų įrišimas

3. Kur yra „React“ projektų saugykla?

„React“ yra viena saugykla, kurioje gyvena https://github.com/facebook/react. Vieno saugykla reiškia, kad visas jos kodas ir kiti šaltiniai yra saugomi toje pačioje vietoje, kad būtų lengviau kurti ir valdyti.

4. Kokia yra dabartinė stabili „React“ versija?

Naujausia stabili „React“ versija nuo 14 m. birželio 2022 d. yra 18.2.0.

5. Nurodykite skirtumus tarp „React Native“ ir „ReactJS“.

„React“ ir „ReactJS“ yra vienodi, o „React Native“ yra pagrįsta „React“. Dėl jų skirtumų „React“ naudojama kuriant dinamines ir reaguojančias žiniatinklio programų vartotojo sąsajas, o „React Native“ skirta programoms mobiliesiems kurti.

6. Kuo skiriasi elementas ir komponentas?

React elementas yra paprastas ir nekintamas objektas, sukurtas atstovauti DOM mazgui. Nekintamumas reiškia, kad jo negalima pakeisti, kai jis buvo sukurtas, nes jis pateikiamas DOM. Kita vertus, „React“ komponentas yra keičiamas ir sukuria JSX išvestį.

7. Kaip sukuriate komponentą?

Yra du būdai sukurti komponentą React: 1.) Funkciniai komponentai ir 2.) klasės komponentai. Kaip rodo pavadinimai, funkcijos komponentas sukuriamas naudojant funkcijos deklaraciją, o klasės komponentas sukuriamas naudojant klasės deklaraciją.

//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. Išvardykite 4 reakcijos komponento etapus

React komponentas per savo gyvavimo ciklą patiria šiuos 4 etapus:

1. Pradinis etapas – Komponento konstrukcija numatytoje būsenoje su pradiniais rekvizitais
2. Montavimo fazė – JSX komponento atvaizdavimas
3. Atnaujinimo etapas – Komponento būsenos pakeitimai ir programos perbraižymas
4. Išmontavimo fazė – Komponento pašalinimas iš DOM

9. Paaiškinkite, ką reiškia aukštesnės eilės Komponentas

Aukštesnės eilės komponentas (HOC) yra „React“ komponentų kūrimo metodika. Jis naudoja esamą komponentą, kad sukurtų naują su papildomomis funkcijomis. Kitaip tariant, HOC yra funkcija, kuri komponentą priima kaip argumentą ir grąžina naują komponentą su papildomomis funkcijomis.

10. Kas yra valdomi ir nekontroliuojami komponentai?

Valdomas komponentas yra „React“ komponentas, kuris perima savo vertę per rekvizitus ir praneša sistemai apie bet kokius pakeitimus per skambučius. Jį valdo pagrindinis komponentas, kuris jį valdo valstybės ir perduoda reikšmes kaip rekvizitus valdomam komponentui. Kita vertus, nekontroliuojamas komponentas valdo savo būseną, todėl turėsite pateikti užklausą DOM naudojant Nuoroda gauti jo vertę.

11. Kas yra „Props in React“?

„Props“ programoje „React“ yra tik paprastas būdas pasakyti savybes, ir tuo jūs turite omenyje komponento savybes. Rekvizitai naudojami duomenims iš pirminio komponento perduoti vienam ar daugiau antrinių komponentų, o antriniam komponentui jie yra tik skaitomi.

12. Kas yra rekvizitas.vaikai?

Atribute Props.children pateikiama informacija apie visą komponento, turinčio pradžios ir uždarymo žymas, turinį. Šie vaikai nurodo visus elementus, kurie yra apibrėžti dabartiniame komponente ir gali būti vienas, daug arba nė vieno.

13. Ar galite atnaujinti „React“ rekvizitus?

Ne, „React“ rekvizitai yra iš viršaus į apačią ir nekeičiami. Tai reiškia, kad komponentas gali siųsti savo vaikams bet kokias jam patinkančias savybes, bet negali atnaujinti savo rekvizitų. Tik jo tėvai gali atnaujinti savo rekvizitus.

14. Kas yra JSX?

JSX reiškia JavaScript XML. Tai „JavaScript“ sintaksės plėtinys, leidžiantis įrašyti HTML react kodo viduje. Naršyklė vis tiek nesupranta JSX, todėl „React“ turi jį pateikti į skaitomą HTML kodą.

15. Kuo skiriasi komponentas ir elementas

Elementas yra be būsenos ir nekintantis virtualaus DOM mazgo apibrėžimas. Jame yra ir tipas, ir savybė, bet nėra tokių metodų, kaip komponentas. Šis metodų trūkumas daro tai greitą.

16. Kas yra React būsena?

Būsena React reiškia komponente integruotą objektą, kuris naudojamas informacijai apie tą komponentą laikyti ir tvarkyti. Būsena laikui bėgant gali pasikeisti ir suaktyvinti to komponento atvaizdavimą iš naujo. Būseną turite apibrėžti komponento konstruktoriaus metodu, kitaip komponentas tampa be būsenos.

17. Kas yra komponentas be būsenos?

React komponentas be būsenos neturi būsenos. Tai reiškia, kad negalite nustatyti jo būsenos this.setState() metodu ir jis nebuvo pateiktas. Vis dėlto komponentas be būsenos gali turėti rekvizitus.

18. Kaip atnaujinate React būseną

Jūs atnaujinate komponento būseną iškviesdami jį this.setState() metodas.

19. Paaiškinkite „React“ griežtą režimą

Griežtasis „React“ režimas yra įrankis, padedantis kūrėjui atrasti galimas programos problemas, aktyvinant gilesnio lygio komponentų patikras ir paryškinant daugiau įspėjimų. Griežtas režimas galimas tik kūrimo režimu.

20. Ką reiškia pakelti būseną reaguojant?

Tai reiškia, kad antriniams komponentams leidžiama naudotis bendra būsena iš savo tėvų, nes taip lengviau valdyti dalykus, nei kiekvienam antriniam komponentui atskirai valdyti bendrą būseną.

21. Kaip perduodate duomenis reaguodami?

Perduodate duomenis „React“ naudodami rekvizitus ir atgalinius skambučius. „React“ rekvizitai yra vienakrypčiai, leidžiantys ypatybes perduoti vaikams tik iš tėvų komponentų. Norėdami perduoti duomenis iš antrinio komponento tėvui, turite naudoti atgalinio skambinimo funkciją.

22. Apibrėžkite Fliusas Reakcijoje

Flux yra vienakryptė koncepcija, skirta nukreipti duomenų srautą programoje. Vienakryptis reiškia, kad duomenys gali būti perduodami tik iš tėvų komponentams vaikams. Flux taip pat gali apimti kelias duomenų saugyklas vienoje programoje.

23. Apibrėžkite Redux Reakcijoje

Redux yra naudinga atvirojo kodo „JavaScript“ biblioteka, skirta sudėtingoms programos būsenoms valdyti. Jis yra nepriklausomas ir gali būti naudojamas kitose sistemose, tokiose kaip Angular. Skirtingai nuo „Flux“, „Redux“ centralizuoja programos būsenos valdymą, todėl lengviau kurti sudėtingas vartotojo sąsajas.

24. Kada turėtumėte naudoti Redux?

Ne visoms programoms reikia Redux. Tačiau tai naudinga šiomis sąlygomis:

1. Kai programoje yra daug programų būsenų
2. Kai jūsų programos logika sudėtinga
3. Kai jūsų programa turi didelę kodų bazę
4. Kai turite dažnai atnaujinti programą
5. Kai prie programos dirba daug žmonių

25. Koks pagrindinis skirtumas tarp Redux ir Flux?

Pagrindinis skirtumas tarp šių dviejų yra tas, kad „Redux“ tvarko visus programos duomenis iš vienos parduotuvės, o „Flux“ galite turėti kelias parduotuves.

26. Išvardykite Redux komponentus

Yra 4 pagrindinės Redux dalys:

1. parduotuvė – Čia saugoma programos būsena.
2. Veikla – Tai įvykiai, dėl kurių programa siunčia duomenis į „Redux“ parduotuvę.
3. Reduktorius – Tai funkcija, kuri priima dabartinę programos būseną ir veiksmą kaip argumentus, tada grąžina naują būseną.
4. Tarpinė programinė įranga – Ši funkcija leidžia kūrėjui užfiksuoti visus komponento veiksmus, kol jie pasiekia reduktoriaus funkciją.

27. Kas yra React Hooks?

„React“ kabliukai yra funkcijų komponentų funkcija, leidžianti pasiekti įvairias „React“ funkcijas, pvz., būsenos duomenis ir atvaizdavimo naujinimus. Jis buvo pristatytas React 16.8.

28. Išvardykite kabliukų tipą React

„React“ yra daugiau nei 15 kabliukų, pradedant nuo pagrindinių kabliukų, pvz., „useState“, „useEffect“ ir „useContext“, iki papildomų kabliukų, tokių kaip „useCallback“, „useReducer“, „useMemo“, „useRef“ ir pan.

29. Kas yra Fragmentai?

„React“ fragmentas yra patogus būdas sugrupuoti kelis antrinius komponento elementus, nepridedant jų prie DOM. Tiesiog apibrėžkite žymą naudodami:

<>

or

ir įkelkite visus norimus antrinius elementus. Vienintelis skirtumas yra tas, kad sutrumpinta versija <> nepriima raktų ir atributų, o ilgoji versija nepriima.

30. Išvardykite pagrindinius react-dom paketo būdus

Jie yra createPortal(), skirtas vaikams paversti išoriniame DOM, ir flushSync() naujinimams išplauti. Taip pat yra metodai render() ir hydrate(), kurie nuo React 18 buvo pakeisti createRoot() ir hydrateRoot().

31. Kas yra React Keys?

Raktai yra unikalūs identifikatoriai, kuriuos geriausia naudoti sąrašams tvarkyti. Klavišai leidžia lengvai identifikuoti atskirus sąrašo elementus ir sužinoti, kada kiekvienas elementas buvo atnaujintas, ištrintas ar kokiu nors būdu pakeistas.

32. Kodėl React Keys yra svarbūs?

Raktai yra svarbūs React, nes padeda efektyviai atvaizduoti tikrąjį DOM. „React“ yra geras, nes bando sumažinti, kuriuos komponentus jis perteikia po įvykio, o naudojant sąrašo klavišus „React“ nereikės iš naujo pateikti ištisų sąrašų, o tai gali sukelti didelių sąrašų problemų.

33. Kas yra Reakcijos įvykis?

Įvykis yra bet koks veiksmas programoje, kurį atlieka vartotojas arba sistema. Įvykis gali svyruoti nuo pelės paspaudimo ar bakstelėjimo mobiliuosiuose įrenginiuose iki lango dydžio keitimo, klavišų paspaudimo, vilkimo, fokusavimo ir pan.

34. Paaiškinkite ką Sintetinis įvykis priemonė

Sintetinis įvykis yra naršyklės vietinių įvykių įvyniojimas, nes problema ta, kad skirtingos naršyklės skirtingai pavadina savo įvykius. „React“ naudoja sintetinius įvykius, kad išvengtų problemos, kai reikia sukurti kelis diegimus ir metodus visoms skirtingoms naršyklėms. Tokiu būdu „React“ išlaiko bendrus visų skirtingų naršyklės įvykių pavadinimus kaip vieningą API.

35. Kas yra Webpack?

Webpack yra modulių susiejimo sistema, naudojama JavaScript ir CSS failams sujungti ir sumažinti. Jis sukurtas pagal Node.js ir yra naudingas dirbant su daugybe failų arba nekoduotų išteklių, pvz., vaizdų ir šriftų.

36. Kas yra kurti-reaguoti programėlė?

Create-react-app – tai įrankis, padedantis sukurti vieno puslapio React programą Node.js aplinkoje. Jis sugeneruoja visus failus ir aplankus, kurių jums reikia norint paleisti pagrindinę programą, ir paimkite ją iš ten. Tam reikalinga Node 14.0.0 versija ir npm nuo ver. 5.6.

Naudojimas paprastas:

npx Create-React-app myNewApp

cd myNewApp

npm pradžia

37. Ar galite pateikti serverio pusę naudodami „React“?

Taip, galite, nors tai gali pareikalauti daug išteklių dideliems projektams. Serverio atvaizdavimas yra naudingas, nes pagerina vartotojo patirtį ir SEO. Jums reikės Node.js aplinkos, rinktuvo, pvz., Webpack, ir panašios sistemos Kitas.js bei Remix Norėdami pateikti „React“ programas vykdymo metu. Intensyvaus išteklių naudojimo sprendimas yra naudoti statinį svetainės generatorių, pvz., Next.js. Gatsby.

38. Paaiškinkite, ką veikia rodyklės funkcija

Rodyklės funkcija yra tiesiog trumpesnis funkcijų apibrėžimo būdas. Tai ES6 trumpinys, pakeičiantis:

= funkcija () su ()=>.

Pavyzdžiui:

testas = funkcija(){

grąžinti „Tai išbandymas“;

}

tada tampa:

testas = () => {

grąžinti „Tai yra testas“;

}

arba vienos eilutės teiginiams:

testas = () => "Tai yra testas";

39. Kas yra a „React Router“?

„React“ maršrutizatorius yra biblioteka, teikianti maršruto parinkimo funkciją „React“ programoje. Tai leidžia lengvai įtraukti ir naudoti turtingus naršymo komponentus, kurie gali būti labai naudingi dideliems ar sudėtingiems projektams.

40. Kokie yra pagrindiniai React Router naudojimo pranašumai?

Jis sukuria skirtingus jūsų programos URL kelius ir pateikia langų.vietos vertes bei istorijos objektą.

41. Kas yra ComponentWillUnmount()?

Tai komponento metodas, kuris iškviečiamas, kai „React“ ketina sunaikinti komponentą. Tai puiki vieta išvalyti daiktus, išvalyti laikmačius, atšaukti tinklo užklausas ir tvarkyti kitas svarbias inicijavimo problemas.

42. Kas yra konstruktorius()?

Konstruktorius yra komponento metodas, kuris iškviečiamas komponento inicijavimo metu. Paprastai jis naudojamas vietinėms būsenoms inicijuoti ir įvykių apdorojimo metodams susieti.

43. Kas yra virtualus DOM?

„React“ virtualus DOM yra paprasta tikrojo HTML dokumento DOM kopija. Jis naudojamas efektyviam tikrojo DOM pakeitimų valdymui ir atnaujinimui.

44. Kokie yra virtualaus DOM pranašumai prieš tikrąjį DOM?

Virtualus DOM yra lengvas ir greičiau atvaizduojamas nei tikrasis DOM, todėl efektyviau pirmiausia pateikti virtualų DOM ir keisti tikrąjį DOM tik tada, kai reikia. Kiekvienas tikrojo DOM mazgas turi atitinkamą virtualiojo DOM komponentą, o kai virtualiajame komponente po pateikimo yra pakeitimų, „React“ tiksliai žino, kurį tikrąjį HTML mazgą atnaujinti arba ištrinti.

45. Paaiškinkite terminą Susitaikymas Reakcijoje

Suderinimas yra „React“ būdas atnaujinti tikrąjį DOM tik tada, kai reikia, tikrinant atnaujintas virtualaus DOM versijas per diferencijavimą ir atnaujinant tik tikslius mazgus, kurie pasikeitė tikrame DOM.

46. Paaiškinkite terminą Profiler Reakcijoje

Profiler yra „React“ įrankis, padedantis optimizuoti programą, matuojant, kiek kartų programa pateikiama ir kiek laiko užtrunka pateikti kiekvieną komponentą. Tai padeda kūrėjui nustatyti programos dalis, kurias gali reikėti optimizuoti.

47. Paaiškinkite terminą Kontekstas Reakcijoje

Kontekstas yra būdas perduoti duomenis tarp „React“ komponentų daugeliu lygių, neperduodant duomenų per kiekvieną įdėjimo lygį naudojant rekvizitus. Jį geriausia naudoti norint lengvai dalytis duomenimis su daugeliu komponentų, kurių nereikia nuolat atnaujinti, pvz., temos informacija ir vartotojo duomenys. Jo trūkumas yra tas, kad tai gali apsunkinti pakartotinį komponentų naudojimą.

48. Paaiškinkite terminą Montavimas Reakcijoje

Montavimas „React“ yra komponento, kaip mazgo, prijungimo prie DOM procesas. Išmontavimas yra priešingas.

49. Paaiškinkite terminą perteikimas Reakcijoje

Atvaizdavimas yra komponento piešimo procesas. Paprastai tai įvyksta, kai pasikeičia komponento būsena ir „React“ turi perbraižyti vartotojo sąsają. Jei atvaizdavimo metu komponentas perbraižytas, tada perbraižyti ir antriniai jo komponentai.

50. Paaiškinkite terminą Klaidos riba Reakcijoje

Klaidos riba reiškia „React“ komponentą, kuris užfiksuoja „JavaScript“ klaidas iš antrinių komponentų, registruoja klaidas ir vietoje sudužusių mazgų parodo atsarginę vartotojo sąsają. Klaidų ribos buvo įvestos React 16.

Išvada

Pasiekėme šio 50 svarbiausių „React“ interviu klausimų, kuriuos privalote žinoti, sąrašo pabaigą ir, tikimės, jau turėtumėte gerai suprasti, ko galite tikėtis.

Taip pat turėtumėte atkreipti dėmesį į tai, kad niekas nelieka taip, kaip buvo, o jūsų pokalbis gali pasisekti bet kuria kryptimi. Todėl turėtumėte toliau mokytis ir neatsilikti nuo naujienų.