50 suosituinta React-haastattelun kysymystä ja vastausta

ReactJS-kehittäjät ovat erittäin kysyttyjä, ja siihen on hyvä syy. Mutta sinun on todistettava pätevyytesi kehyksessä saadaksesi työpaikan.

Seuraavat ovat usein kysyttyjä React-kehityskysymyksiä ja niiden vastauksia, jotka sinun tulee olla tietoisia. Se sisältää kaiken perusteista edistyneempiin aiheisiin.

1. Mikä React on?

React on ilmainen ja avoimen lähdekoodin JavaScript-kirjasto käyttöliittymän kehittämiseen, joka käyttää komponentteja tulosteen luomiseen yksisivuisille sovelluksille. Reactin on kehittänyt Facebook (Meta), ja sitä ylläpitää kehittäjäyhteisö.

2. Listaa Reactin tärkeät ominaisuudet

Reactin tärkeimmät ominaisuudet ovat:

1. Helppokäyttöisyys
2. Nopea kehitys
3. Komponenttien käyttö
4. JSX
5. Virtuaalinen DOM
6. Korkean suorituskyvyn
7. Yksisuuntainen tietojen sidonta

3. Missä Reactin projektivarasto sijaitsee?

React on yksivarasto, joka asuu https://github.com/facebook/react. Yksivarasto tarkoittaa, että kaikki sen koodi ja muut lähteet tallennetaan samaan paikkaan kehittämisen ja hallinnan helpottamiseksi.

4. Mikä on Reactin nykyinen vakaa versio?

Reactin uusin vakaa versio 14 alkaen on 2022.

5. Kerro erot React Nativen ja ReactJS:n välillä

React ja ReactJS ovat samat, kun taas React Native on rakennettu Reactille. Niiden erojen vuoksi Reactia käytetään luomaan dynaamisia ja responsiivisia käyttöliittymiä verkkosovelluksille, kun taas React Native on suunniteltu sovellusten rakentamiseen mobiilisovelluksina.

6. Mitä eroa on elementillä ja komponentilla?

React-elementti on yksinkertainen ja muuttumaton objekti, joka on luotu edustamaan DOM-solmua. Muuttumattomuus tarkoittaa, että sitä ei voi muuttaa, kun se on luotu, koska se muuttuu DOM:lle. Toisaalta React-komponentti on muuttuva ja tuottaa JSX-tulosteen, kun se on renderöity.

7. Kuinka luot komponentin?

On kaksi tapaa luoda komponentti Reactissa: 1.) Funktiokomponentit ja 2.) luokkakomponentit. Kuten nimet antavat ymmärtää, funktiokomponentti luodaan funktion määrittelyllä, kun taas luokkakomponentti luodaan luokkamäärityksellä.

//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. Luettele React-komponentin 4 vaihetta

React-komponentti käy läpi seuraavat 4 vaihetta elinkaarensa aikana:

1. Alkuvaihe – Komponenttirakenne oletustilassa alkuperäisten tukien kanssa
2. Asennusvaihe – Komponentin JSX-renderöinti
3. Päivitysvaihe – Komponenttien tilan muutokset ja sovelluksen uudelleenpiirtäminen
4. Irrotusvaihe – Komponenttien poistaminen DOM:sta

9. Selitä, mitä korkeamman asteen komponentti tarkoittaa

Korkeamman asteen komponentti (HOC) on React-menetelmä komponenttien luomiseen. Se käyttää olemassa olevaa komponenttia luodakseen uuden, jossa on lisätoimintoja. Toisin sanoen HOC on funktio, joka ottaa komponentin argumenttina ja palauttaa uuden komponentin lisättyineen.

10. Mitä ovat ohjatut ja hallitsemattomat komponentit?

Ohjattu komponentti on React-komponentti, joka ottaa arvonsa rekvisiittauksen kautta ja ilmoittaa järjestelmään kaikista muutoksista takaisinkutsujen kautta. Sitä hallitsee pääkomponentti, joka hallitsee sitä olivat ja välittää arvot rekvisiittana ohjattuun komponenttiin. Hallitsematon komponentti sen sijaan hallitsee tilaansa, ja sinun on tehtävä kysely DOM käyttämällä viite saadakseen sen arvon.

11. Mitä rekvisiitta on Reactissa?

Props in React on vain yksinkertainen tapa sanoa ominaisuuksia, ja sillä viittaat komponentin ominaisuuksiin. Propsia käytetään tietojen siirtämiseen pääkomponentista yhdelle tai useammalle alikomponentille, ja ne ovat vain luku -tilassa alikomponentille.

12. Mitä ovat rekvisiitta.lapset?

Props.children-attribuutti sisältää tiedot kaikesta komponentin sisällöstä, jolla on aloitus- ja sulkemistunniste. Nämä alat viittaavat kaikkiin elementteihin, jotka on määritetty nykyisen komponentin sisällä, ja ne voivat olla yksi, useita tai ei yhtään.

13. Voitko päivittää Reactin rekvisiitta?

Ei, Reactin rekvisiitta on ylhäältä alaspäin suunnattu ja muuttumaton. Tämä tarkoittaa, että komponentti voi lähettää lapsilleen mitä tahansa ominaisuuksia, joista se pitää, mutta se ei voi päivittää rekvisiittaansa. Vain sen vanhempi voi päivittää sen rekvisiitta.

14. Mikä on JSX?

JSX tulee sanoista JavaScript XML. Se on JavaScript-syntaksilaajennus, joka mahdollistaa HTML:n kirjoittamisen react-koodin sisään. Selain ei kuitenkaan ymmärrä JSX:ää, joten Reactin on muutettava se luettavaksi HTML-koodiksi.

15. Mitä eroa on komponentilla ja elementillä?

Elementti on virtuaalisen DOM-solmun tilaton ja muuttumaton määritelmä. Se sisältää sekä tyypin että ominaisuuden, mutta ei sellaisia ​​menetelmiä kuin komponentilla. Tämä menetelmien puute tekee siitä nopean.

16. Mikä on tila Reactissa?

Reactin tila viittaa komponentin sisäänrakennettuun objektiin, jota käytetään pitämään ja hallitsemaan kyseistä komponenttia koskevia tietoja. Tila voi muuttua ajan myötä ja laukaisee siten kyseisen komponentin uudelleenrenderöinnin. Sinun on määritettävä tila komponentin konstruktorimetodissa tai muuten komponentti muuttuu tilattomaksi.

17. Mikä on tilaton komponentti?

Tilattomalla React-komponentilla ei ole tilaa. Tämä tarkoittaa, että et voi asettaa sen tilaa kummallakaan this.setState() menetelmää eikä sitä ole renderöity. Tilattomalla komponentilla voi kuitenkin olla rekvisiitta.

18. Kuinka päivität tilan Reactissa

Päivität komponentin tilan kutsumalla sitä this.setState() menetelmällä.

19. Selitä Reactin tiukka tila

Reactin tiukka tila on työkalu, joka auttaa kehittäjää löytämään sovelluksen mahdolliset ongelmat aktivoimalla komponenttien syvemmän tason tarkistukset ja korostamalla lisää varoituksia. Tiukka tila on käytettävissä vain kehitystilassa.

20. Mitä Lifting State Up in React tarkoittaa?

Se tarkoittaa, että lapsikomponenttien annetaan jakaa yhteinen tila vanhemmaltaan, koska tämä tekee asioista helpompia hallita kuin kunkin alikomponentin hallita yhteistä tilaa erikseen.

21. Kuinka välität tietoja Reactissa?

Välität tietoja Reactissa rekvisiitta ja takaisinsoittoja käyttämällä. Reactin rekvisiitta on yksisuuntainen, joten ominaisuudet siirtyvät vain vanhempien komponenteista lapsilleen. Jos haluat siirtää tietoja alikomponentista vanhemmalle, sinun on käytettävä takaisinsoittotoimintoa.

22. Määritä Vuo Reactissa

Flux on yksisuuntainen konsepti tietovirran ohjaamiseksi sovelluksessa. Yksisuuntaisuus tarkoittaa, että tiedot voivat siirtyä vain vanhemmilta lapsille. Flux voi sisältää myös useita tietovarastoja sovellusta kohden.

23. Määritä Redux Reactissa

Redux on hyödyllinen avoimen lähdekoodin JavaScript-kirjasto sovelluksen monimutkaisten tilojen hallintaan. Se on itsenäinen ja sitä voidaan käyttää muissa kehyksissä, kuten Angularissa. Toisin kuin Flux, Redux keskittää sovelluksen tilanhallinnan, mikä helpottaa monimutkaisten käyttöliittymien rakentamista.

24. Milloin sinun pitäisi käyttää Reduxia?

Kaikki sovellukset eivät tarvitse Reduxia. Mutta se on hyödyllinen seuraavissa olosuhteissa:

1. Kun sovelluksessasi on suuria määriä sovellustiloja
2. Kun sovelluksesi logiikka on monimutkainen
3. Kun sovelluksellasi on suuri koodikanta
4. Kun sinun on päivitettävä sovellus usein
5. Kun sovelluksen parissa työskentelee paljon ihmisiä

25. Mikä on suurin ero Reduxin ja Fluxin välillä?

Suurin ero näiden kahden välillä on, että Redux hallitsee kaikkia sovellustietoja yhdestä kaupasta, kun taas sinulla voi olla useita kauppoja Fluxin alla.

26. Listaa Reduxin komponentit

Reduxissa on 4 pääosaa:

1. Kauppa – Tänne tallennat sovelluksen tilan.
2. Toiminta – Nämä ovat tapahtumia, jotka saavat sovelluksen lähettämään tietoja Redux-kauppaan.
3. Lyhentäjällä – Tämä on toiminto, joka hyväksyy sovelluksen nykyisen tilan ja toiminnon argumentteina ja palauttaa sitten uuden tilan tuloksena.
4. middleware – Tämän ominaisuuden avulla kehittäjä voi kaapata kaikki toiminnot komponentista ennen kuin ne saavuttavat vähennystoiminnon.

27. Mitä ovat React Hookit?

React-koukut ovat toimintokomponenttien ominaisuus, jonka avulla voit käyttää erilaisia ​​React-ominaisuuksia, kuten tilatietoja ja renderöintipäivityksiä. Se esiteltiin Reactissa 16.8.

28. Listaa koukkujen tyypit Reactissa

Reactissa on yli 15 koukkua, alkaen peruskoukuista, kuten useState, useEffect ja useContext, lisäkoukkuihin, kuten useCallback, useReducer, useMemo, useRef ja niin edelleen.

29. Mitä ovat fragmentit?

React-fragmentti on kätevä tapa ryhmitellä useita alielementtejä komponenttiin lisäämättä niitä DOM:iin. Määrität vain tunnisteen käyttämällä:

<>

or

ja lataa kaikki haluamasi lapsielementit sisään. Ainoa ero on, että lyhyt versio <> ei hyväksy avaimia ja attribuutteja, kun taas pitkä versio hyväksyy.

30. Listaa react-dom-paketin päämenetelmät

Ne ovat createPortal() lasten tekemiseen ulkoiseen DOM:iin ja flushSync() päivitysten tyhjentämiseen. Käytettävissä on myös render()- ja hydrate()-menetelmät, jotka on korvattu menetelmillä createRoot() ja hydrateRoot() React 18:sta lähtien.

31. Mitä ovat React Key -näppäimet?

Avaimet ovat yksilöllisiä tunnisteita, joita käytetään parhaiten luetteloiden hallintaan. Avainten avulla on helppo tunnistaa luettelon yksittäiset kohteet ja tietää, milloin kutakin kohdetta on päivitetty, poistettu tai muutettu millään tavalla.

32. Miksi React Keys ovat tärkeitä?

Avaimet ovat tärkeitä Reactissa, koska ne auttavat todellisen DOM:n tehokkaassa renderöinnissa. React on hyvä, koska se yrittää minimoida, mitkä komponentit se hahmontaa uudelleen tapahtuman jälkeen, ja avainten käyttö luettelossa estää Reactia joutumasta renderöimään uudelleen kokonaisia ​​listoja, mikä voi olla ongelma suurissa luetteloissa.

33. Mikä on tapahtuma Reactissa?

Tapahtuma on mikä tahansa sovelluksen toiminta, joka tulee joko käyttäjältä tai järjestelmältä. Tapahtuma voi vaihdella hiiren napsautuksesta tai mobiililaitteiden napautuksesta ikkunan koon muuttamiseen, näppäinpainallukseen, vetämään, tarkentamiseen ja niin edelleen.

34. Selitä mitä Synteettinen tapahtuma välineet

Synteettinen tapahtuma on kääre selaimen alkuperäisten tapahtumien ympärille, ja ongelmana on, että eri selaimet nimeävät tapahtumansa eri tavalla. React käyttää synteettisiä tapahtumia välttääkseen ongelman, joka liittyy useiden toteutusten ja menetelmien luomiseen kaikille eri selaimille. Tällä tavalla React ylläpitää yhteiset nimet kaikille eri selaintapahtumille yhtenäisenä API:na.

35. Mikä Webpack on?

Webpack on moduulien niputusjärjestelmä, jota käytetään JavaScript- ja CSS-tiedostojen yhdistämiseen ja pienentämiseen. Se on rakennettu Node.js:lle ja on hyödyllinen, kun työskentelet suuren määrän tiedostoja tai ei-koodisisältöä, kuten kuvia ja fontteja, kanssa.

36. Mikä luo-react-sovellus on?

Create-react-app on työkalu, jonka avulla voit luoda yksisivuisen React-sovelluksen Node.js-ympäristössäsi. Se luo kaikki tiedostot ja kansiot, joita tarvitset perussovelluksen käynnistämiseen, ja otat sen sieltä. Se vaatii Node-version 14.0.0 uudemmat ja npm ver. 5.6.

Käyttö on yksinkertaista:

npx create-react-app myNewApp

cd myNewApp

npm alku

37. Voitko renderöidä palvelinpuolen Reactilla?

Kyllä, voit, vaikka se voi olla resurssivaltaista suurissa projekteissa. Palvelinpuolen renderöinti on hyödyllistä, koska se parantaa käyttökokemusta ja SEO. Tarvitset Node.js-ympäristön, niputtajan, kuten Webpack, ja kehyksen, kuten Next.js ja Remix renderöidä React-sovelluksia ajon aikana. Ratkaisu intensiiviseen resurssien käyttöön on käyttää a staattinen sivustogeneraattori, kuten Next.js-pohjainen gatsby.

38. Selitä, mitä nuolitoiminto tekee

Nuolifunktio on yksinkertaisesti lyhyempi tapa määrittää funktioita. Se on ES6-lyhenne, joka korvaa:

= funktio() with ()=>.

Esimerkiksi:

testi = funktio(){

palauttaa "Tämä on testi";

}

tulee sitten:

testi = () => {

palauttaa "Tämä on testi";

}

tai yksirivisille lausumille:

testi = () => "Tämä on testi";

39. Mikä on a Reagoi reititin?

React-reititin on kirjasto, joka tarjoaa reititystoiminnot React-sovelluksessa. Sen avulla on helppo sisällyttää ja käyttää monipuolisia navigointikomponentteja, jotka voivat olla erittäin hyödyllisiä suurissa tai monimutkaisissa projekteissa.

40. Mitkä ovat React Routerin käytön tärkeimmät edut?

Se luo sovelluksellesi erilaisia ​​URL-polkuja ja tarjoaa window.location-arvot ja historiaobjektin.

41. Mikä on ComponentWillUnmount()?

Tämä on komponenttimenetelmä, jota kutsutaan aina, kun React on tuhoamassa komponentin. Se on mukava paikka siivota tavaroita, tyhjentää ajastimia, peruuttaa verkkopyyntöjä ja käsitellä muita tärkeitä alustuksenpoistoongelmia.

42. Mikä on The Constructor()?

Konstruktori on komponentin menetelmä, jota kutsutaan komponentin alustuksen aikana. Sitä käytetään tyypillisesti paikallisten tilojen alustamiseen ja tapahtumakäsittelijämenetelmien sitomiseen.

43. Mikä on Virtual DOM?

Reactin virtuaalinen DOM on kevyt kopio todellisen HTML-dokumentin DOM:sta. Sitä käytetään tehokkaaseen hallintaan ja muutosten päivittämiseen todellisessa DOM:ssa.

44. Mitkä ovat virtuaalisen DOM:n edut todelliseen DOM:iin verrattuna?

Virtuaalinen DOM on kevyt ja nopeampi renderöidä kuin todellinen DOM, ja tämä tekee tehokkaammaksi renderöidä ensin virtuaaliseen DOM:iin ja tehdä muutoksia todelliseen DOM:iin vain tarvittaessa. Jokaisella todellisen DOM:n solmulla on vastaava komponentti virtuaalisessa DOM:ssa, ja kun virtuaalikomponenttiin on tehty muutoksia renderoinnin jälkeen, React tietää tarkalleen, mikä todellinen HTML-solmu päivittää tai poistaa.

45. Selitä termi sovinto Reactissa

Täsmäytys on Reactin tapa päivittää todellinen DOM vain tarvittaessa, tarkistamalla virtuaalisen DOM:n päivitetyt versiot erotuksella ja päivittämällä vain tarkat solmut, jotka muuttuivat todellisessa DOM:ssa.

46. Selitä termi Profiler Reactissa

Profiler on React-työkalu, joka auttaa optimoimaan sovelluksen mittaamalla, kuinka monta kertaa sovellus renderöi ja kuinka kauan kunkin komponentin hahmontamiseen kuluu. Tämä auttaa kehittäjää tunnistamaan sovelluksen osat, jotka saattavat tarvita optimointia.

47. Selitä termi Tausta Reactissa

Konteksti on tapa siirtää tietoja React-komponenttien välillä useilla tasoilla ilman, että dataa tarvitsee välittää kunkin sisäkkäisen tason läpi rekvisiittausten avulla. Sitä käytetään parhaiten tietojen helppoon jakamiseen monien komponenttien kanssa, jotka eivät tarvitse jatkuvaa päivitystä, kuten teematiedot ja käyttäjätiedot. Sen haittapuoli on, että se voi vaikeuttaa komponenttien uudelleenkäyttöä.

48. Selitä termi Asennus Reactissa

Asennus Reactissa on prosessi, jossa komponentti liitetään solmuna DOM:iin. Irrottaminen on päinvastoin.

49. Selitä termi tulkinta Reactissa

Renderöinti on prosessi, jossa piirretään komponentti. Se tapahtuu yleensä, kun komponentin tila muuttuu ja Reactin on piirrettävä käyttöliittymä uudelleen. Jos komponentti piirretään uudelleen renderöinnin aikana, myös sen alikomponentit piirretään uudelleen.

50. Selitä termi Virheen raja Reactissa

Virheraja viittaa React-komponenttiin, joka havaitsee JavaScript-virheet alikomponenteistaan, kirjaa virheet lokiin ja näyttää varakäyttöliittymän kaatuneiden solmujen tilalle. React 16:ssa otettiin käyttöön virherajat.

Yhteenveto

Olemme saavuttaneet tämän React-haastattelun 50 tärkeimmän pakollisen kysymyksen luettelon loppuun, ja toivottavasti sinulla on jo hyvä käsitys siitä, mitä voit odottaa.

Huomaa myös, että mikään ei pysy ennallaan ja haastattelusi voi viedä mihin tahansa suuntaan. Siksi sinun tulee jatkaa opiskelua ja pysyä ajan tasalla.