سوالات مصاحبه برای کتابخانه React.js

با سلام خدمت دوستان

ری اکت پرطرفدارترین کتابخانه ری اکت هست و مطمئنا تخصص داشتن توی این کتابخونه میتونه موقعیت شغلی و حقوق شمارو تا چند برابر افزایش بده. کتابخانه ری اکت توسط فیسبوک در سال 2013 ارائه شد و با استقبال بی نظیر توسعه دهنده های جاوا اسکریپت قرار گرفت.

توی مقاله قبلم راجع به سوالاتی که ممکن هست درباره فریمورک انگولار پرسیده بشه رو براتون نوشتم. توی این مقاله میخوام راجع به سوالاتی که ممکن است از کتابخانه ری اکت پرسیده بشه رو براتون مینویسم. توجه داشته باشید که بنده خلاصه ای از پاسخ ها رو مینویسم و در صورت لزوم حتما بیشتر جستجو کنید و اطلاعات خودتون رو توی اون زمینه بالا ببرید.

خوب بیشتر از این شمارو منتظر نمیزارم بریم سراغ سوالات:

1) چرا ری اکت کتابخونه هست و فریمورک نیست؟

• به این دلیل به ری اکت میگن کتابخونه چون هسته این کتابخونه شامل همه امکانات لازم برای ساختن یه وبسایت کامل رو نداره. مثلا روتر ری اکت رو باید به صورت جدا به کتابخونه اضافه کنید و ...

2) کامپوننت چیست؟

• کامپوننت ها در واقعه تکه هایی از کد شما هستن که اجزای تشکیل دهنده صفحتون رو میسازن. با استفاده از کامپوننت شما هم نیاز به تکرار کد ندارید و هم کد خوانا تری دارید.

3) ری کانسیلیشن (reconcilation) چیست؟

• ری اکت برای دوباره رندر کردن کد شما ساختاری را استفاده میکند که به صورت بهینه و در کمترین زمان ممکن این رندر شدن به پایان برسه. به این شیوه میگن reconcilation که توی خود سایت ری اکت میتونید دقیقا این ساختار رو مطالعه کنید

4) ریداکس چیست؟

• ریداکس در یه استیت مرکزی اپلیکیشن شما هستش و همه کامپوننت های شما به این استیت دسترسی دارن.

5) آیا با context api کار کردید و چه استفاده ای داره؟

• کانتکست api در واقع یه متغیر گلوبال هست و برای پاس دادن یه متغیر یا یک مقداری به child component ها استفاده میشه. با استفاده از این روش میتونید از ایراد prop drilling جلوگیری کنید.

6) مشکل prop drilling رو توضیح بدید و بگین که چطوری میشه جلوگیری کرد ازش؟

• این ایراد زمانی پیش میاد که شما میخواید یه property رو به کامپوننت های بچه پاس بدید و توی این مسیر از یه سری کامپوننت رد میشه این پراپرتی های شما که هیچ استفاده ای ازش ندارن. به این ایراد میگن prop drilling و با استفاده از context api یا redux یا composition میتونید از این ایراد جلوگیری کنید.

7) کامپوننت composition چیست و چه کارایی دارد؟

• شما میتونید چند کامپوننت رو با هم با ساختاری که خودتون میخواید ترکیب کنید و یه کامپوننت جدید ایجاد کنید و از اون توی قسمت های مختلف سایتتون استفاده کنید. به این ویژگی میگن component composition.

8) چرا با وجود context api باز هم از redux استفاده میشه و فرق اینا چی هست؟

• توی خود ریداکس از ویژگی context استفاده شده اما این 2 ویژگی تفاوت هایی با هم دارن. کانتکست کاراییش برای زمانی هستش که شما میخواید یک مقدار رو به child component ها پاس بدید و مورد استفادش توی این موارد هست اما ریداکس هسته مرکزی دیتا های ذخیره شده شماست و همه کامپوننت ها همزمان به این دیتا دسترسی دارن. همچنین ریداکس یه سری middleware داره که امکانات بیشتری رو نسبت به context api در اختیار شما قرار میدن.

9) ریداکس middleware چی هستن و چه استفاده ای دارن؟

• در واقع اینها یک واسط هستن برای استفاده شما از ریداکس که یه سری ویژگی رو در اختیار شما قرار میدن. دو تا از معروف ترین middleware هایی که در ریداکس استفاده میشه redux thunk و redux saga هستن. به طور مثال توی ریداکس تانک شما میتونید به جای دیتا یه فانکشن پاس بدید توی ریداکستون و ...

10) فرق استیت و پراپ چی هستش؟

• استیت ها در واقع دیتای شما هستن و زمانی که به child component پاس داده میشن به عنوان پراپرتی قابل استفاده هستن و قابل تغییر نخواهند بود مگر استیتی که پاس داده شده تغییر کنه.

11) ویژگی destruction و spread رو توضیح بدید.

• توی ویژگی destruction شما میتونید به یه پراپرتی از یه آبجکت بدون انجام هیچ عملیات اضافه دسترسی داشته باشید

به عنوان مثال شما یک شی دارید به اسم a با این فرمت:

let a = {'name': 'Araz', 'family': 'Shams'};

حالا شما میخواید به پراپرتی نیم دسترسی داشته باشید. این کار به سادگی با روش descruction قابل دسترسی هست"

let {name} = a;

یا مثال زیر:

var obj = {a: 1, b: 2, c: 3};
var {a=5, b=5, d=5} = obj;

خوب میرسیم به ویژگی spread. شما میتونی یه آرایه رو پخش کنید به صورتی که همه المان هارو جدا جدا بهشون دسترسی داشته باشید. معمولا برای پاس دادن پراپرتی ها یا کپی کردن آرایه و غیره استفاده میشه و معمولا با سه نقطه یا (...) نشون داده میشه مثلا مثال زیر برای کپی کردن استفاده میشه:

let a = [1,2,3]'

let b = [...a];

12) ویژگی rest و spread چه فرق هایی با هم دارن؟

• ویژگی spread رو توی سوال قبل گفتم اما ویژگی rest از همون spread استفاده میکنه توی تابع ها و شما هر چقدر بخواید میتونید آرگومان پاس بدید به تابع.

13) توی ری اکت ما چند مدل کامپوننت داریم؟

سه مدل داریم: functional component, class component, pure component

کلاس کامپوننت ها در واقع همون کامپوننت های اپ شما هستن که با ویژگی کلاس تعریف میشن. اما functional component ها در واقع همون کامپوننت های شما هستن که با تابع تعریف میشن و pure component ها برای سرعت بخشیدن به سایت شما انجام میشه که کامپوننت هایی که نیاز به ری رندر شدن زیاد ندارن و طی شرایط خاصی باید ری رندر بشن و به ازای هر ورودی همون خروجی رو میگیرن توی هر زمانی استفاده میشه.

14) لایف سایکل های ری اکت رو توی کلاس کامپوننت ها نام ببرید:

• زمانی که شما یه کلاس کامپوننت میسازید یه سری تابع به صورت اتوماتیک صدا زده میشن که طی شرایط خاصی لازم میشن. اینجا این لایف سایکل هارو نام میبرم به ترتیب و مطالعش با خودتون:

componentWillMount, componentDidMount, componentShouldUpdate, componentWillReceiveProps, componentUnmount

15) مزیت functional component نسبت به class component ها چیست؟

• مزیت توابع نسبت به کلاس ها این هست که هم کد شما خوانا تر هست و هم قابلیت به اشتراک گذاشتن منطق رو توی کامپوننت های مختلف دارید بر خلاف کلاس کامپوننت ها.

16) هوک چیه و چه استفاده هایی داره؟

• شما همون امکاناتی که توی کلاس کامپوننت ها دارید میتونید توی فانکشنال کامپوننت ها هم داشته باشید با استفاده از هوک ها. همچنین شما خودتون میتونی هوک اختصاصی خودتون رو بنویسید که بهش میگن custom hook که همون بحث به اشتراک گذاشتن منطق توی قسمت های مختلف هست.

17) معروفترین هوک توی ری اکت رو نام ببرید به نظر شخصیتون و بگین چه استفاده هایی داره؟

• معروفترین هوک توی ری اکت هوک useEffect هست و لایف سایکل های component did mount و componentunmount رو براتون شبیه سازی میکنه. چیزی که توی این هوک مینویسید در واقع همون componentdidmount هست و چیزی که return میکنید همون componentunmount هست.

18) ارگومان دومی که به useEffect پاس داده میشه چیه و چه ویژگی هایی داره؟

• ارگومان دوم در واقع همون وابستگی ها یا dependency های لایف سایکل useEffect هست و به شما میگه که به ازای تغییر چه ویژگی هایی باید این هوک دوباره اجرا بشه ... اگر یه آرایه خالی باشه یعنی یه بار فقط توی didmount کامپوننتون قابل اجراست

19) چرا توی فانکشنال کامپوننت ها باید حتما react ایمپورت بشه وگرنه ارور میگیریم؟

• دلیلش این هستش که شما توی html که دارید رندر میگیرین از ویژگی React.createElement استفاده میکنید و نیاز هست حتما ایمپورت بشه البته از ری اکت 17 به بعد لازم نیست که ایمپورت کنید و ری اکت ساختار خاص خودش رو داره.

20) ویرچوال دام (Virtual Dom) چیه و چه فرقی با Real Dom داره؟

• در واقع Virtual Dom کد اچ تی ام ال شما هست که به صورت آبجکت جاوا اسکریپت ذخیره میشه و سرعت اپ شمارو نسبت به Real Dom به شدت میبره بالا. توی ری اکت شما میتونید قسمتی از کد خودتون رو تغییر بدید و دوباره رندر بگیرین که بر خلاف Real Dom که کد html دوباره رندر گرفته میشه.

21) چند تا از هوک هارو نام ببرید.

useEffect, useState, useReduce, useSelector, useContext, useMemo,

22) کاستوم هوک ها (custom hooks) چی هستش و چه استفاده ای داره؟

• اینها در واقع همون هوک هایی هستن که شما برای خودتون مینویسید و هوک دیفالت ریک اکت نیست و همون لاجیکی هستش که شما شیر میکنید بین کامپوننت های مختلفتون و با استفاده از روش destruction که قبلا بهتون گفتیم میتونید بهشون دسترسی داشته باشید

23) پراپرتی هارو چطوری validate میکنید؟

• با استفاده از ویژگی proptypes ها

24) رفرنس ها یا refs ها چی هستن و چه استفاده ای دارن؟

• رفرنس ها در واقع اشاره میکنن به یه ورودی شما و شما میتونی هر کاری با اون input کنید مثل focus و ... همچنین میتونید این رفرنس رو پاس بدید و توی کامپوننت های دیگه ازش استفاده کنید.

25) های اوردر کامپوننت HOC یا Higher Order Components ها چی هستن؟

• اینها کامپوننت هایی هستن که یه کامپوننت به عنوان ورودی میگیرن و یه کامپوننت جدید رو برمیگردونن.

26) فرق بین controlled component و un controlled component ها چی هست؟

• فرقشون این هست که توی controlled component ها شما تغییرات ورودی خودتون رو دنبال میکنید توی فرم و هر تغییری که ایجاد میشه توی state خودتون ذخیره میکنید با استفاده از و ... اما توی un controlled ها شما فقط موقع ارسال فرم و ثبت فرم با استفاده از refs ها به دیتای فرمتون دسترسی دارید و از اونها استفاده میکنید

27) شما زمانی که توی constructor خودتون از super() استفاده میکنید چه ویژگی داره؟

• باعث میشه که بتونید از props.this توی کلاس خودتون استفاده کنید در غیر این صورت مقدار undefined برگشت داده میشه. البته اصولی تر بخوام بگم ارث بری کلاس کامپوننت شما از ری اکت کامپوننت هست.

28 ) جی اس ایکس یا jsx چیست؟

• همون کد های اچ تی ام ال شما که توی کد جاوا اسکریپت استفاده میشه که باعث ایجاده virtual dom میشه رو میگن jsx یعنی مخفف javascript xml.

29) چرا برای به روز کردن استیت از useState استفاده میکنیم و مستقیم مقدار دهی نمیکنیم؟

• به این دلیل که اگر مستقیم مقداردهی بشه کامپوننت شما دوباره رندر نمیشه.

30) پروفایلر ها یا profiler ها چی هستن و چه استفاده ای دارن؟

• پروفایلر ها یک تگ اچ تی ام ال مانند هستن که یه متد دارن به اسم onRender که شما میتونید زمانی که اون تیکه کد رندر میشه یه متد رو صدا بزنید. برای بررسی کردن سرعت کامپوننت و اینکه اگر میخواید عملیاتی توی رندر شدن اون تیکه کد انجام بدید استفاده میشه

31) پرتال ها یا portal ها چی هستن و چه استفاده ای دارن؟

• شما میتونید توی کامپوننت خودتون یه تیکه کد رو بیرون از کامپوننت رندر بگیرین. مثلا شما میخواید یه مودال رو قبل از بسته شدن تگ body بیرون از کامپوننت رندر بگیرین که از پورتال ها استفاده میشه

32) کلید ها یا keys توی loop هایی که روی DOM میزنید چه استفاده ای داره؟

• این کلید ها باید یکتا باشه و ری اکت با استفاده از این کلید ها شناسایی میکنه دام شمارو توی لوپ و میتونه تغییرات و ایونت هرو بهتر اعمال کنه.

33) فرگمنت ها یا Fragment ها چی هستن؟

• اینها در واقع تگ های اچ تی ام الی هستن که موقع رندر شدن رندر نمیشن و از DOM اضافه جلوگیری میکنن. مثلا شما توی کامپوننت ری اکتتون یه روت یا root دارید که میتونه همین فرگمنت ها باشه و از دام اضافه جلوگیری میکنه

34) برای هندل کردن ارور ها از چی استفاده میشه توی ری اکت؟

• از یه چیزی به اسم ErrorBoundaries استفاده میشه. این تگ رو دور اون قسمتی که میخواید چک کنید ببینید ارور داره یا نه قرار میدین و با استفاده از متد که زمانی که یه ارور اتفاق میوفته یه متد رو صدا میزنید.

35) برای سرعت بخشید به یه اپ چه پیشنهاداتی دارید؟

• استفاده از purecomponent ها و useMemo ها برای کش کردن اپتون و همچنین کامپوننت های کوچک که هزینه رندر کردن رو بیاره پایین و لیست های طولانیتون رو فقط اون فیلد هایی که نیازه رو استفاده کنید که بهش میگن virtualize long lists و همچنین تا جایی که ممکنه از رندر کردن های بی جا و حجم زیاد اچ تی ام ال جلوگیری کنید. همچنین تغییراتی که توی لیست هاتون میدین و نمیخواید توی چایلد ها استفاده بشه از concat و غیره میتونی استفاده کنید که پراپرتی هاتون تغییر نکنه و ...

این لینک رو بخونید: https://reactjs.org/docs/optimizing-performance.html

36) وب کامپوننت ها چی هستن و چه استفاده ای دارن؟

• شما میتونید تگ اچ تی ام ال جدید تعریف کنید که شامل قسمت های مختلفی از لاجیکتون باشه که از HTMLElement ها ارث بری میکنن و میتونید هر جا خواستید استفاده کنید.

37) توی ری اکت strict mode چیست؟

• یه سری استاندارد هست که باعث میشه کدتون خواناتر و تمیزتر باشه. لینک زیر رو بخونید:

https://reactjs.org/docs/strict-mode.html

38) برای تست نوشتن از چی استفاده میکنید؟

• معمولا ری اکت رو با jest تست نویسی میکنن که میتونید برید مطالعه کنید.

39) معمولا ریکوئست هاتون رو با چی میزنین و توی کدوم لایف سایکل؟

• بهترین لایف سایکل برای ریکوئست هاتون componentdidmount هست و معمولا از کتابخونه axios استفاده میشه که دیتا های بیشتری رو در اختیارتون میزاره.

40) توی ریداکس action ها و dispatcher ها و reducer ها و Provider ها چی هستن؟

• اکشن ها در واقع همون اتفاقاتی هستن که قراره به دیتای مرکزیتون اطلاع داده باشه و این اطلاع توسط dispatcher ها اتفاق میوفته و به reducer ها پاس داده میشه این اکشن ها. این reducer ها استیت جدید شمارو تعریف میکنن بر اساس اکشن ها و توی دیتای مرکزی و ذخیره مرکزیتون ذخیره میکنن.

همچنین Provider ها ناحیه ای که این دیتا قابل دسترسی هست رو براتون مشخص میکنه که معمولا توی App.js بیرون کل DOM قرار داده میشه.

41) لیزی لودینگ یا Lazy Loading چیست؟

• این اتفاق باعث میشه کد شما تیکه تیکه بشه و در لود اولیه کد کدتون اجرا نشه و فقط کامپوننت هایی که قراره رندر بشن لود بشن. این اتفاق با استفاده از React.lazy اتفاق میوفته و بیرونش یه تگ Suspense میزان که یه متد به اسم fallback داره که شما میتونید یه لودینگ بزارید تا زمانی که کامپوننت شما لود میشه.

42) روتر ری اکت چیست و چه استفاده ای داره؟

• چون ری اکت برای اپ های تک صفحه ای استفاده میشه یا SPA لینک های شما بدون رفرش شدن صفحه لود میشن. این کار با استفاده از روتر ری اکت قابل انجام هست که از پکیج react-router-dom استفاده میشه و شما میتونید صفحاتتون رو تعریف کنید و لینک کنید به هم بدون رفرش شدن صفحه.

43) شما babel میدونید چیه؟

• در واقع یک کامپایلر هست که میاد jsx شمارو تبدیل به کدی میکنه که قابل شناسایی برای مرورگر ها هستش. یک polyfill هم به حساب میاد چون هم مرورگر های قدیمی میشناسنش هم مرورگر های جدید

44) سرور کامپوننت های یا React Server Component (RSC) چیست؟

• شمارو ارجاع میدم به این مقاله کامل و جامع: https://virgool.io/JustReact/react-server-component-juywzxefdyzm?source=grid_footer_post-----0-44

45) این که اساسا css in js چیه و چه مشکلی رو حل میکنه و با چه سیستم های کار کردی توی این زمینه؟

• شما میتوانید استایل هارو به صورت یک آبجکت تعریف کنید و توی jsx از اونها استفاده کنید و bind کنید به virtual dom. این ابجکت به صورت اینلاین سی اس اس اضافه میشه. فرضا شما یه کامپوننت پدر دارید و یه کامپوننت چایلد. استایل های کامپوننت پدر ممکنه توی چایلد نوشته بشه و اور رایت بشه. با استفاده از این متد میشه استایل اینلاین داد و از این مشکل جلوگیری کرد. یکی از سیستم هایی که توی این زمینه کار میکنه jss هست.

این خلاصه ای بود از تجربه من توی 3 4 سال تجربه توی برنامه نویسی ری اکت. این مطالب صرفا جهت اطلاع شما عزیزان نوشته شده و میتونید برای درک عمیق تر این مطالب از سایت خود ری اکت استفاده کنید.

https://reactjs.org/

امیدوارم که این مطالب کمکتون کرده باشه. لینک لینکداین خودم رو هم میزارم در صورت داشتن سوال خوشحال میشم باهاتون در ارتباط باشم https://www.linkedin.com/in/araz-shams/

تشکر از شما دوستان

آراز شمس الدینلوی