Nangungunang 50 na dapat malaman sa React na Mga Tanong at Sagot sa Panayam
Pumunta sa isang panayam ng developer ng React at iniisip kung ano ang maaaring mga tanong? Narito ang isang listahan ng nangungunang 50 tanong at ang kanilang mga sagot.
Ang mga developer ng ReactJS ay lubos na hinahanap at mayroong magandang dahilan para doon. Ngunit kailangan mong patunayan ang iyong kahusayan sa balangkas upang makuha ang trabaho.
Ang mga sumusunod ay madalas itanong sa React development na mga katanungan at ang kanilang mga sagot na dapat mong malaman. Kabilang dito ang lahat mula sa mga pangunahing kaalaman hanggang sa mas advanced na mga paksa.
Talaan ng nilalaman
itago
1. Ano ang React?
Ang React ay isang libre at open-source na JavaScript library para sa pagbuo ng user interface, na gumagamit ng mga bahagi upang lumikha ng output para sa mga single-page na application. Ang React ay binuo ng Facebook (Meta) at pinananatili ng isang komunidad ng developer.
2. Ilista ang mahahalagang katangian ng React
Ang pinakamahalagang feature ng React ay kinabibilangan ng:
- Dali ng paggamit
- Mabilis na pag-unlad
- Ang paggamit ng mga sangkap
- JSX
- Ang Virtual DOM
- Mataas na pagganap
- One-way na data binding
3. Nasaan ang repositoryo ng proyekto ng React?
Ang React ay isang mono-repository na nakatira sa https://github.com/facebook/react. Ang pagiging isang mono-repository ay nangangahulugan na ang lahat ng code nito at iba pang mga mapagkukunan ay nakaimbak sa parehong lugar para sa mas madaling pag-unlad at pamamahala.
4. Ano ang kasalukuyang stable na bersyon ng React?
Ang pinakabagong stable na bersyon ng React mula Hunyo 14, 2022, ay 18.2.0.
5. Sabihin ang mga pagkakaiba sa pagitan ng React Native at ReactJS
Ang React at ReactJS ay pareho, habang ang React Native ay binuo sa React. Para sa kanilang mga pagkakaiba, ang React ay ginagamit sa paggawa ng mga dynamic at tumutugon na user interface para sa mga web application, habang ang React Native ay idinisenyo para sa pagbuo ng mga application bilang mga mobile app.
6. Ano ang pagkakaiba ng isang Elemento at isang Component?
Ang React element ay isang simple at hindi nababagong bagay na nilikha upang kumatawan sa isang DOM node. Ang pagiging hindi nababago ay nangangahulugang hindi na ito mababago kapag nalikha na ito, dahil nagre-render ito sa DOM. Ang isang React component, sa kabilang banda, ay nababago at gumagawa ng JSX output kapag nai-render.
7. Paano ka gumagawa ng Component?
Mayroong dalawang paraan upang lumikha ng isang bahagi sa React: 1.) Mga bahagi ng function at 2.) mga bahagi ng klase. Tulad ng ipinahihiwatig ng mga pangalan, ang isang bahagi ng function ay nilikha gamit ang isang deklarasyon ng function, habang ang isang bahagi ng klase ay nilikha gamit ang isang deklarasyon ng klase.
//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. Ilista ang 4 na yugto ng React Component
Ang isang React component ay sumasailalim sa sumusunod na 4 na yugto sa lifecycle nito:
- Paunang Yugto – Component construction sa default na estado na may mga paunang props
- Phase ng Pag-mount – JSX rendering ng component
- Phase ng Pag-update – Mga pagbabago sa estado ng bahagi at muling pagguhit ng aplikasyon
- Unmounting Phase – Pag-alis ng bahagi mula sa DOM
9. Ipaliwanag kung ano ang ibig sabihin ng mas mataas na pagkakasunud-sunod na Component
Ang isang higher-order component (HOC) ay isang React methodology para sa paggawa ng mga bahagi. Gumagamit ito ng isang umiiral na bahagi upang lumikha ng bago na may karagdagang pag-andar. Sa madaling salita, ang HOC ay isang function na kumukuha ng component bilang argumento at nagbabalik ng bagong component na may mga karagdagang feature.
10. Ano ang kinokontrol at hindi nakokontrol na mga bahagi?
Ang isang kinokontrol na bahagi ay isang bahagi ng React na kumukuha ng halaga nito sa pamamagitan ng mga props at nag-aabiso sa system ng anumang mga pagbabago sa pamamagitan ng mga callback. Ito ay kinokontrol ng isang bahagi ng magulang na namamahala nito ay at ipinapasa ang mga halaga bilang props sa kinokontrol na bahagi. Ang isang hindi nakokontrol na bahagi, sa kabilang banda, ay namamahala sa estado nito, at kakailanganin mong i-query ang Paghatol paggamit Ref upang makuha ang halaga nito.
11. Ano ang Props in React?
Ang Props sa React ay isang simpleng paraan lamang ng pagsasabi ng mga katangian, at sa pamamagitan nito, tinutukoy mo ang mga katangian ng isang bahagi. Ang mga prop ay ginagamit upang ipasa ang data mula sa isang bahagi ng magulang sa isa o higit pang mga bahagi ng bata, at ang mga ito ay read-only sa bahagi ng bata.
12. Ano ang props.children?
Ang katangian ng Props.children ay naglalaman ng impormasyon sa lahat ng nilalaman ng isang bahagi na may pambungad at pansarang tag. Ang mga batang ito ay tumutukoy sa lahat ng elemento na tinukoy sa loob ng kasalukuyang bahagi, at maaaring isa, marami, o wala.
13. Maaari ka bang mag-update ng mga props sa React?
Hindi, ang mga props sa React ay top-down at hindi nababago. Nangangahulugan ito na ang isang bahagi ay maaaring magpadala ng anumang mga katangian na gusto nito sa mga anak nito, ngunit hindi nito maa-update ang mga props nito. Ang magulang lang nito ang makakapag-update ng props nito.
14. Ano ang JSX?
Ang JSX ay kumakatawan sa JavaScript XML. Ito ay isang JavaScript syntax extension na ginagawang posible na magsulat ng HTML sa loob ng react code. Hindi pa rin naiintindihan ng browser ang JSX, kaya kailangang i-render ito ng React sa nababasang HTML code.
15. Ano ang Pagkakaiba sa pagitan ng Isang Bahagi at Isang Elemento
Ang isang elemento ay isang stateless at hindi nababagong kahulugan ng isang virtual na DOM node. Naglalaman ito ng parehong uri at ari-arian, ngunit walang mga pamamaraan tulad ng mayroon ang isang bahagi. Ang kakulangan ng mga pamamaraan na ito ay nagpapabilis.
16. Ano ang estado sa React?
Ang isang estado sa React ay tumutukoy sa isang in-built na bagay sa isang bahagi na ginagamit upang hawakan at pamahalaan ang impormasyon tungkol sa bahaging iyon. Maaaring magbago ang isang estado sa paglipas ng panahon, at sa gayon ay magti-trigger ng muling pag-render ng bahaging iyon. Kailangan mong tukuyin ang estado sa paraan ng tagabuo ng bahagi, kung hindi, ang bahagi ay magiging walang estado.
17. Ano ang isang walang estado na Component?
Ang isang stateless React component ay walang estado. Nangangahulugan ito na hindi mo maaaring itakda ang estado nito this.setState() paraan at hindi rin ito nai-render. Ang isang stateless component ay maaaring magkaroon ng props bagaman.
18. Paano mo i-update ang isang estado sa React
Ina-update mo ang estado ng isang bahagi sa pamamagitan ng pagtawag nito this.setState() pamamaraan.
19. Ipaliwanag ang Strict Mode ng React
Ang mahigpit na mode ng React ay isang tool na tumutulong sa developer na matuklasan ang mga potensyal na problema sa application sa pamamagitan ng pag-activate ng mas malalim na antas ng mga pagsusuri sa mga bahagi at pag-highlight ng higit pang mga babala. Available lang ang strict mode sa development mode lang.
20. Ano ang ibig sabihin ng Lifting State Up in React?
Nangangahulugan ito na hayaan ang mga bahagi ng bata na magbahagi ng isang karaniwang estado mula sa kanilang magulang, dahil ginagawa nitong mas madaling pamahalaan ang mga bagay kaysa sa bawat bahagi ng bata na indibidwal na pamahalaan ang karaniwang estado.
21. Paano Mo Ipapasa ang Data sa React?
Nagpapasa ka ng data sa React gamit ang mga props at callback. Ang mga props ng React ay unidirectional, na nagbibigay-daan sa mga property na ipasa lamang mula sa mga bahagi ng magulang sa kanilang mga anak. Upang maipasa ang data mula sa isang child component sa isang magulang, kailangan mong gumamit ng callback function.
22. Tukuyin Pagkilos ng bagay sa React
Ang Flux ay isang unidirectional na konsepto para sa pagdidirekta sa daloy ng data sa isang application. Ang pagiging unidirectional ay nangangahulugan na ang data ay maaari lamang pumasa mula sa mga bahagi ng magulang patungo sa mga bata. Ang Flux ay maaari ding magsama ng maraming data store sa bawat app.
23. Tukuyin Redux sa React
Ang Redux ay isang kapaki-pakinabang na open-source na JavaScript library para sa pamamahala ng mga kumplikadong estado sa isang application. Ito ay independyente at maaaring magamit sa iba pang mga balangkas tulad ng Angular. Hindi tulad ng Flux, isinasentralisa ng Redux ang pamamahala ng estado ng isang application, sa gayo'y ginagawang mas madali ang pagbuo ng mga kumplikadong UI.
24. Kailan Mo Dapat Gamitin ang Redux?
Hindi lahat ng app ay nangangailangan ng Redux. Ngunit ito ay kapaki-pakinabang sa mga sumusunod na kondisyon:
- Kapag mayroon kang malaking halaga ng mga estado ng aplikasyon sa iyong app
- Kapag kumplikado ang lohika ng iyong app
- Kapag may malaking codebase ang iyong app
- Kapag kailangan mong i-update ang app nang madalas
- Kapag marami kang taong nagtatrabaho sa app
25. Ano ang Pangunahing Pagkakaiba sa pagitan ng Redux at Flux?
Ang pangunahing pagkakaiba sa pagitan ng dalawa ay pinamamahalaan ng Redux ang lahat ng data ng application mula sa isang tindahan, habang maaari kang magkaroon ng maraming mga tindahan sa ilalim ng Flux.
26. Ilista ang mga Bahagi ng Redux
Mayroong 4 na pangunahing bahagi ng Redux:
- Mag-imbak – Dito mo iniimbak ang estado ng aplikasyon.
- aksyon – Ito ang mga kaganapan na nagiging sanhi ng app na magpadala ng data sa Redux store.
- reducer – Ito ay isang function na tumatanggap ng kasalukuyang estado ng app at isang aksyon bilang mga argumento, pagkatapos ay nagbabalik ng bagong estado bilang resulta.
- Middleware – Ang tampok na ito ay nagbibigay-daan sa isang developer na makuha ang lahat ng mga aksyon mula sa isang bahagi bago nila maabot ang reducer function.
27. Ano ang React Hooks?
Ang mga react hook ay isang feature ng mga bahagi ng function na nagbibigay-daan sa iyong ma-access ang iba't ibang feature ng React, gaya ng data ng estado at pag-render ng mga update. Ipinakilala ito sa React 16.8.
28. Ilista ang uri ng Hooks sa React
Mayroong 15+ hook sa React, simula sa mga pangunahing hook tulad ng useState, useEffect, at useContext hanggang sa mga karagdagang hook tulad ng useCallback, useReducer, useMemo, useRef, at iba pa.
29. Ano ang mga Fragment?
Ang React fragment ay isang maginhawang paraan upang pagpangkatin ang maraming elemento ng bata sa isang bahagi, nang hindi idinaragdag ang mga ito sa DOM. Tinukoy mo lang ang tag gamit ang:
<>
or
at i-load ang lahat ng mga elemento ng bata na gusto mo sa loob. Ang pagkakaiba lang ay ang short-hand na bersyon <> ay hindi tumatanggap ng mga key at attribute, habang ang mahabang bersyon ay tumatanggap.
30. Ilista ang mga pangunahing pamamaraan ng react-dom package
Sila ang createPortal() para sa pag-render ng mga bata sa isang panlabas na DOM at ang flushSync() para sa pag-flush ng mga update. Mayroon ding mga pamamaraan ng render() at hydrate(), na pinalitan ng createRoot() at hydrateRoot() mula noong React 18.
31. Ano ang React Keys?
Ang mga susi ay mga natatanging identifier na pinakamahusay na ginagamit upang pamahalaan ang mga listahan. Pinapadali ng mga key na tukuyin ang mga indibidwal na item sa isang listahan at malaman kung kailan na-update, tinanggal, o binago ang bawat item sa anumang paraan.
32. Bakit Mahalaga ang React Keys?
Mahalaga ang mga susi sa React dahil nakakatulong ito sa mahusay na pag-render ng totoong DOM. Maganda ang React dahil sinusubukan nitong i-minimize kung aling mga bahagi ang muling ire-render pagkatapos ng isang event, at ang paggamit ng mga key sa isang listahan ay pumipigil sa React na muling i-render ang buong listahan, na maaaring maging problema sa malalaking listahan.
33. Ano ang isang Event sa React?
Ang isang kaganapan ay anumang pagkilos sa isang app na nagmumula sa alinman sa user o sa system. Ang isang kaganapan ay maaaring mula sa pag-click ng mouse o pag-tap sa mga mobile device hanggang sa pagbabago ng laki ng window, pagpindot sa key, pag-drag, pagtutok, at iba pa.
34. Ipaliwanag kung ano Sintetikong Kaganapan paraan
Ang isang synthetic na kaganapan ay isang pambalot sa paligid ng mga katutubong kaganapan ng isang browser, na ang problema ay ang iba't ibang mga browser ay pinangalanan ang kanilang mga kaganapan sa ibang paraan. Gumagamit ang React ng mga sintetikong kaganapan upang maiwasan ang problema sa pagkakaroon ng maraming pagpapatupad at pamamaraan para sa lahat ng iba't ibang browser doon. Sa ganitong paraan, pinapanatili ng React ang mga karaniwang pangalan para sa lahat ng iba't ibang mga kaganapan sa browser bilang isang pinag-isang API.
35. Ano ang Webpack?
Ang Webpack ay isang module bundling system na ginagamit upang pagsamahin at maliitin ang mga file ng JavaScript at CSS. Ito ay binuo sa Node.js at nakakatulong kapag nagtatrabaho sa maraming file o non-code asset tulad ng mga larawan at font.
36. Ano Ang create-react-app?
Ang Create-react-app ay isang tool na tumutulong sa iyong lumikha ng isang solong page na React na application sa iyong Node.js na kapaligiran. Binubuo nito ang lahat ng mga file at folder na kailangan mo upang magsimula ng isang pangunahing app at kukunin mo ito mula doon. Nangangailangan ito ng bersyon ng Node 14.0.0 pataas at npm mula sa ver. 5.6.
Ang paggamit ay simple:
npx create-react-app myNewApp
cd myNewApp
magsimula na ako
37. Maaari Mo bang I-render ang Side ng Server na may React?
Oo, magagawa mo, bagama't maaari itong maging masinsinang mapagkukunan para sa malalaking proyekto. Nakakatulong ang pag-render sa gilid ng server dahil pinapabuti nito ang karanasan ng user at SEO. Kakailanganin mo ang isang kapaligiran ng Node.js, isang bundler tulad ng Webpack, at isang tulad ng balangkas Susunod.js at Remix para mag-render ng React app sa runtime. Ang isang solusyon sa masinsinang paggamit ng mapagkukunan ay ang paggamit ng static na site generator, gaya ng Next.js-based gatsby.
38. Ipaliwanag Kung Ano ang Nagagawa ng Arrow Function
Ang arrow function ay isang mas maikling paraan ng pagtukoy ng mga function. Ito ay isang ES6 shorthand na pumapalit sa:
= function() sa ()=>.
Halimbawa:
pagsubok = function(){
ibalik ang "Ito ay isang pagsubok";
}
pagkatapos ay nagiging:
pagsubok = () => {
ibalik ang "Ito ay isang Pagsubok";
}
o para sa mga single-line na pahayag:
pagsubok = () => "Ito ay isang Pagsubok";
39. Ano ang a ReactRouter?
Ang React router ay isang library na nagbibigay ng routing functionality sa isang React app. Pinapadali nitong isama at gamitin ang mga rich navigational na bahagi, na maaaring maging kapaki-pakinabang para sa malalaki o kumplikadong mga proyekto.
40. Ano ang Mga Pangunahing Kalamangan ng paggamit ng React Router?
Gumagawa ito ng iba't ibang url path para sa iyong app at nagbibigay ng mga value ng window.location at isang history object.
41. Ano ang ComponentWillUnmount()?
Ito ay isang component method na tatawagin sa tuwing malapit nang sirain ng React ang component. Ito ay isang magandang lugar upang linisin ang mga bagay, i-clear ang mga timer, kanselahin ang mga kahilingan sa network, at pangasiwaan ang iba pang mahahalagang isyu sa deinitialization.
42. Ano ang The Constructor()?
Ang constructor ay ang paraan ng component na tinatawag sa panahon ng pagsisimula ng component. Ito ay kadalasang ginagamit para sa pagsisimula ng mga lokal na estado at para sa mga paraan ng nagbubuklod na event handler.
43. Ano ang Virtual DOM?
Ang virtual na DOM ng React ay isang magaan na kopya ng DOM ng aktwal na HTML na dokumento. Ginagamit ito para sa mahusay na pamamahala at pag-update ng mga pagbabago sa totoong DOM.
44. Ano ang mga Bentahe ng Virtual DOM kaysa sa Real DOM?
Ang virtual na DOM ay magaan at mas mabilis na i-render kaysa sa totoong DOM, at ginagawa nitong mas mahusay na mag-render muna sa virtual na DOM at gumawa lamang ng mga pagbabago sa totoong DOM kapag may pangangailangan. Ang bawat node sa totoong DOM ay may katumbas na bahagi sa virtual na DOM, at kapag may mga pagbabago sa isang virtual na bahagi pagkatapos ng pag-render, alam na talaga ng React kung aling tunay na HTML node ang ia-update o tatanggalin.
45. Ipaliwanag ang termino Pagkakasundo sa React
Ang Reconciliation ay ang paraan ng React sa pag-update ng totoong DOM kung kinakailangan, sa pamamagitan ng pagsuri sa mga na-update na bersyon ng virtual DOM sa pamamagitan ng diffing at pag-update lamang ng mga eksaktong node na nagbago sa totoong DOM.
46. Ipaliwanag ang termino Profiler sa React
Ang Profiler ay isang tool sa React na tumutulong na i-optimize ang isang app sa pamamagitan ng pagsukat kung gaano karaming beses nagre-render ang isang application at kung gaano katagal mag-render ang bawat bahagi. Nakakatulong ito sa developer na matukoy ang mga bahagi ng application na maaaring mangailangan ng pag-optimize.
47. Ipaliwanag ang termino Kaugnay na kahulugan sa React
Ang konteksto ay isang paraan ng pagpasa ng data sa pagitan ng mga bahagi ng React sa maraming antas nang hindi kinakailangang ipasa ang data sa bawat antas ng nesting gamit ang mga props. Pinakamainam itong gamitin para sa madaling pagbabahagi ng data sa maraming bahagi na hindi nangangailangan ng patuloy na pag-update, gaya ng impormasyon ng tema at data ng user. Ang downside nito ay maaari nitong gawing mahirap ang muling paggamit ng bahagi.
48. Ipaliwanag ang termino Kabitan sa React
Ang pag-mount sa React ay ang proseso ng pag-attach ng isang bahagi bilang isang node sa DOM. Ang pag-un-mount ay ang kabaligtaran.
49. Ipaliwanag ang termino -Render sa React
Ang pag-render ay ang proseso ng pagguhit ng isang bahagi. Karaniwan itong nangyayari kapag nagbabago ang estado ng bahagi at kailangang i-redraw ng React ang UI. Kung ang isang bahagi ay muling iginuhit habang nagre-render, ang mga batang bahagi nito ay muling iginuhit.
50. Ipaliwanag ang termino Hangganan ng Error sa React
Ang hangganan ng error ay tumutukoy sa isang bahagi ng React na nakakakuha ng mga error sa JavaScript mula sa mga child component nito, nagla-log ng mga error, at nagpapakita ng fallback na UI bilang kapalit ng mga node na nag-crash. Ang mga hangganan ng error ay ipinakilala sa React 16.
Konklusyon
Naabot na namin ang dulo ng listahang ito ng nangungunang 50 dapat malaman na mga tanong sa pakikipanayam sa React at sana ay mayroon kang magandang ideya kung ano ang maaari mong asahan sa ngayon.
Dapat mo ring tandaan na walang nananatiling pareho at ang iyong pakikipanayam ay maaaring kumuha ng anumang direksyon Samakatuwid, dapat kang magpatuloy sa pag-aaral at manatiling napapanahon.
Kaugnay na Artikulo
