React Müsahibə Sualları
React, proqramçılara sadə, sürətli və genişlənə bilən veb proqramlar yaratmağa imkan verən səmərəli, çevik və açıq mənbəli Facebook komandası tərəfindən yaradılmış bir JavaScript kitabxanasıdır. Hal-hazırda, React getdikcə daha çox şirkətin istifadə etdiyi ən populyar qabaqcıl texnologiyalardan biridir və əgər siz iş müsahibəsinə hazırlaşırsınızsa, bu ReactJS müsahibə sualları təlimatı sizin üçün uyğundur.
-
React-in əsas xüsusiyyətləri hansılardır?
- RealDOM manipulyasiyalarının bahalı olduğunu nəzərə alaraq RealDOM əvəzinə VirtualDOM istifadə edir.
- Server tərəfində render olmanı dəstəkləyir.
- Bir istiqamətli məlumat axını və ya məlumat bağlanmasını izləyir.
- Təkrar istifadə olunan birləşdirilə bilən UI komponentlərindən istifadə edir.
- State idarə edilməsi daha asandır
-
Komponent nədir?
Komponentlər müstəqil və təkrar istifadə edilə bilən kodlardır. Onlar JavaScript funksiyaları ilə eyni məqsədlidir, lakin təcrid olunmuş şəkildə işləyir və HTML qaytarır. Komponentlər iki növdə olur, Sinif komponentləri və Funksiya komponentləri.
-
State nədir?
State, komponent haqqında məlumat və ya məlumatları saxlamaq üçün istifadə olunan daxili react obyektidir. State dəyəri zamanla dəyişə bilər və hər dəfə dəyişdikdə, komponent yenidən render edilir. State üzərində edilən dəyişiklik istifadəçi davranışına və ya sistem tərəfindən yaradılan hadisələrə cavab olaraq baş verə bilər və bu dəyişikliklər komponentin necə görünəcəyini müəyyən edir.
-
State və props xüsusiyyətləri haqqda?
|
Props
|
State
|
|
Qebul eden komponentdə yalnız oxumaq mümkündür
|
Həm oxumaq həm də dəyişikliklər etmək olur
|
|
Bir komponentdən digər komponentlərə arqument kimi ötürməyə imkan verir
|
Komponentlər haqqında məlumat saxlayır
|
|
Child komponent tərəfindən əlçatan ola bilər
|
Child komponent tərəfindən əlçatan deyil
|
|
Daha yaxşı performansa sahibdir
|
Performans cəhətdən nisbətən zəifdir
|
|
Dəyişən zaman komponentin yenidən render olunmasına səbəb olur
|
Dəyişən zaman komponentin yenidən render olunmasına səbəb olur
|
-
Niyə biz state dəyərin birbaşa yeniləməməliyik?
State dəyərini birbaşa yeniləməyə çalışan zaman komponent yenidən render olunmur və edilən dəyişiklik görünmür. Bunun əvəzinə setState() vəya hooklarda state dəyişmək üçün təyin edilən funksiyadan istifadə etmək lazımdır.
-
"Key" nədir və onu element massivlərində istifadə etməyin faydası nədir?
Key elementlərin massivlərini yaradarkən daxil etməli olduğunuz xüsusi sətir atributudur. O reacta hansı elementlərin dəyişdirildiyini, əlavə olunduğunu və ya silindiyini müəyyən etməyə kömək edir.
const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
Key olaraq index istifadə etməməyə çalışmalıyıq.
-
HTML ve react eventhandler arasında nə fərqlər var?
React elementləri ilə hadisələrin idarə edilməsi DOM elementlərində hadisələrin idarə edilməsinə çox bənzəyir. Bəzi sintaksis fərqləri var:
- Reaksiya hadisələri kiçik hərflə deyil, camelCase ilə adlandırılır.
- JSX ilə string deyil də funksiyanın özünü event handlerə göndərə bilirik.
8. Reactda hansi hooklar var?
- useState
- useEffect
- useRef
- useCallback
- useMemo
- useContext
- useReducer
9. Reactda lifecycle nədir?
React-də hər bir komponentin həyat dövrü var. Bu həyat dövrünün də müxtəlif mərhələləri var. Bunlar əsasen Mounting, Updating, and Unmounting adlanan hissələrdir.
10. Higher-Order Components nədir?
Daha yüksək səviyyəli komponent (HOC) bir komponenti götürən və yeni bir komponent qaytaran bir funksiyadır. Əsasən, bu, React-in kompozisiya təbiətindən irəli gələn bir nümunədir. Təkrar kod yazılmasını azaltmaq üçün istifadə edilir.
11. Kontekst nədir?
Daha dərində yerləşən child komponentlərə state və ya funksiyanı göndərən zaman (propslarla) onları istifadə etməyən parent komponentlər də qəbul etmək-ötürmək məcburiyyətində qalır. Contextlə bunun qarşısına keçmək olur. Harda yerləşməyindən asılı olmayaraq yalnız istifadə etmək istəyən komponent daxilinde birbaşa əldə edilir.
12. Children proplar nədir?
Children qəbul edən komponentin açılış və bağlanış tagları arasında yadığınız bir vəya bir neçə componentdir. Onlar funksiya komponentlərdə props.children class komponentlərdə isə this.props.children ilə qəbul edilir.
const MyDiv = React.createClass({
render: function() {
return <div>{this.props.children}</div>
}
})
ReactDOM.render(
<MyDiv>
<span>{'Hello'}</span>
<span>{'World'}</span>
</MyDiv>,
node
)
13. React-də portallar nədir?
Portal child komponentin DOM iyerarxiyasından kənarda mövcud olan DOM qovşağına göndərmək üçün tövsiyə olunan üsuldur.
ReactDOM.createPortal(child, container)
14. Hansı yaddasaxlama üsulları var ?
Yadda saxlama rekursiv/bahalı funksiya çağırışlarının dəyərlərini keş saxlamağa imkan verən bir prosesdir ki, funksiya növbəti dəfə eyni arqument(lər) ilə çağırılanda funksiyanı yenidən hesablamaq əvəzinə keşlənmiş dəyər qaytarılsın. Bunun üçün reactin bizə verdiyi useMemo, useCallback ve React.memo istifade edilir.
- React.memo() komponenti props kimi qəbul edən daha yüksək səviyyəli komponentdir (HOC). Komponent daxilindəki prop vəya state dəyəri dəyişmədikcə yenidən render olmanın qarşısını alır.
- useMemo() react hookudur. Yaddaşda saxlanan dəyəri qaytara bilərik və funksiyadan asılılıqlar dəyişməyibsə, yenidən render olunmur.
- useCallback() react hookudur. useMemo() kimi çalışır lakin funksiyanın özünü bizə verir.
15. Reactda fərqli səhifələr arasında necə keçid etmək olur?
React Router kitabxanasının köməyi ilə səhifədə yenilənmə olmadan başqa səhifələrə keçid etmək olur. Burada biz routlarımızı və ona qarşılığ gələn komponenti təyin edirik. Beləliklə linkdə həmən route gələn zaman bizim təyin etdiyimiz səhifə görünür.
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>