اگه قصد ورود به بازار کار ری اکت رو دارید و میخواید به عنوان یک React Developer توی یک شرکت استخدام بشید ، لیست سوالات مصاحبه ریکت بشدت براتون ضروریه !!
میپرسید چرا ؟
چون 95% سوالاتی که از برنامه نویس ها توی مصاحبه های استخدامی ری اکت پرسیده میشه، باهمدیگه مشترکه ! و ما این سوالات رو جمع آوری کردیم و توی این صفحه به همراه پاسخ هاشون براتون قرار دادیم.
پس اگه یک قرار مصاحبه React دارید و استرس دارید که نتونید به سوالات مطرح شده تو مصاحبه فنی پاسخ درست بدید، حتما این لیست سوالات مصاحبه ری اکت رو مطالعه کنید تا بتونید با پاسخ درست به تمامی سوال ها یک موقعیت شغلی خوب بدست بیارید 🙂
تو مقاله سوالات مصاحبه ری اکت، که در وبسایت فِرانت اِندی منتشر شده این لیست رو بصورت کامل منتشر کردیم. پیشنهاد میکنم روی لینک بالا کلیک کنید و این سوالات رو در FrontEndi مطالعه کنید.
در ادامه میتونید چند نمونه از این سوالات رو در ویرگول مطالعه کنید :
درصورتیکه از Fragment بجای div استفاده کنید مزایای زیر را برای شما خواهد داشت :
استفاده از React.Fragment باعث میشود کد شما تمیزتر و خواناتر باشد .
کامپوننت شما سریعتر Render میشود و از حافظه کمتری استفاده میکند .
استفاده از div به دلیل اینکه ویژگی های بیشتری نسبت به Fragment دارد باعث سنگین شدن صفحه و بارگذاری دیرتر صفحه میشود ، پس زمانیکه از React.Fragment استفاده کنید سرعت بارگذاری صفحه نیز سریعتر خواهد بود .
اگر از div استفاده کنید ، به دلیل تو در تو شدن Element ها در DOM ، دیباگ کردن کد سخت تر خواهد شد ، در مقابل استفاده از Fragment باعث میشود Element کمتری در DOM قرار بگیرد و دیباگ کد راحت تر باشد .
بریم سراغ سوال بعدی از لیست سوالات مصاحبه ری اکت ..
اگه یک کامپوننت داشته باشیم که داخلش هیچ State داخلی نداشته باشیم، به اون کامپوننت stateless Component میگیم. یعنی کامپوننت بدون State !
اگه تو کامپوننت خودمون حداقل یک state داشته باشیم ( به کمک هوک useState ) این یعنی کامپوننت ما stateFull هست.
در کل به کامپوننت هایی که State داخلی دارن statefull component میگیم.
درمورد معایب ری اکت میشه یه مقاله مفصل نوشت اما با توجه به ماهیت این مقاله که میخوایم به سوالات استخدامی ریکت بپردازیم، خلاصه گویی میکنیم.
ری اکت یک کتابخونه جاوا اسکریپتی هست که بشدت در معرض تغییره! تو نسخه های قبلی منتشر شده از ری اکت به وضوح دیدیم که چقدر تغییرات گسترده ای داشته.
بطور مثال اضافه شدن هوک ها ، منسوخ شدن class Component ها و …
قطعا این تغییرات مفید بودن اما خب پروژه هایی که با React توسعه داده میشن همیشه باید بروزرسانی بشن.
این شما هستید که باید انتخاب کنید که حاضر به بروزرسانی مداوم پروژه هستید یا نه! ( کتابخونه های دیگه ای هستن که سرعت تغییر خیلی پایین تری دارن )
اگه به معماری MVC نگاه کنیم میبینیم که کتابخانه ری اکت فقط بخش View رو داره کنترل میکنه! و برای Controller و Model به ابزار ها و کتابخانه های جانبی احتیاج داره.
همین باعث میشه که ساختار و الگو های ضعیفی داشته باشیم. درصورتیکه در فریمورک های جاوااسکریپتی مثل Angular چنین مشکلاتی رو نداریم!
گرچه این مورد ثابت نشده اما تجربه نشون داده که Crawler ها توانایی مناسبی در سئو کردن سایت های ری اکتی ندارن. این صرفا در حد یک نگرانیه و البته که راه حل هایی برای این مشکل وجود داره.
اما بهرحال سئو در ریکت یکی از چالش های اصلی این کتابخونه ی دوست داشتنیه.
دونستن معایب کتابخانه React نشون میده که شما درک عمیقی از این کتابخانه دارید، پس احتمالش زیاده که از بین سوالات استخدامی React ، این سوال هم از شما پرسیده بشه.
اگه با ری اکت کار کرده باشید حتما به ReactDOM در ری اکت یا اسم react-dom در ری اکت برخوردید!
اما بریم ببینیم که کار این پکیج چیه ؟
ReactDOM یکسری متد برای کار با DOM مرورگر در اختیار ما و ری اکت میزاره تا بتونیم DOM رو باهاش مدیریت کنیم.
در حقیقت به کمک ReactDOM در ریکت میتونیم DOM اصلی رو دستکاری کنیم.
پکیج ReactDOM چندین متود و تابع در اختیار ما میزاره مثل :
توضیح این متود ها خیلی مفصله و حتما در یک مقاله جداگانه بررسیشون میکنیم.
بریم سراغ سوال بعدی از لیست سوالات مصاحبه ریکت ..
تو ری اکت به چندین روش مختلف میشه استایل دهی رو انجام داد:
ما میتونیم به اِلِمان های JSX خودمون یک خصوصیت style بدیم. خصوصیت style از ما یک Object جاوا اسکریپتی میگیره که میتونیم داخل این آبجکت استایل های خودمون رو مطرح کنیم.
تو مثال زیر ما به اِلِمان h1 خودمون رنگ قرمز دادیم :
<h1 style={{color: "red"}}>عاطفه</h1>
استایل های ما در این روش باید بصورت camelCase نوشته بشن. یعنی ما backgroundcolor رو بصورت backgroundColor باید بنویسیم.
ما میتونیم تمامی استایل های خودمون رو داخل یک فایل .css بنویسیم و صرفا داخل کامپوننت خودمون فراخوانیش کنیم.
مثلا استایل زیر رو داخل فایل style.css مینویسیم :
header{ background-color: #282c34;}
فقط فراموش نکنید که کلاس header رو به اِلِمان JSX خودتون پاس بدید.
یکی دیگه از روش های استایل دادن به کامپوننت ها و Element ها ، Css Modules هست.
مزیت این روش این هست که دیگه نگران اسم تکراری class های خودتون نیستید، چون اون کلاس فقط در همون کامپوننت قابلیت استفاده داره.
برای اینکه یک فایل CSS Modules بسازیم باید آخر اسم فایل css ، عبارت module.css. رو قرار بدیم.
مثلا اسم فایل ما style.module.css باشه . حالا میتونیم داخلش استایل های معمولی css رو قرار بدیم.
بریم سراغ سوال بعدی از لیست سوالات مصاحبه React ..
در حقیقت memo به ما اجازه میده از re-Render اضافی کامپوننت تا زمانیکه Props اون تغییری نکرده، جلوگیری کنیم.
تو تیکه کد زیر ، ما کامپوننت Music رو memo کردیم. خروجی یک کامپوننت جدید هست به اسم MemoizedMusic :
export function Music({ title, description }) { return ( <div> <div>Music title: {title}</div> <div>Desc: {description}</div> </div> ); } export const MemoizedMusic = React.memo(Music);
تو تیکه کد بالا ، ما کامپوننت Music رو داخل ()React.memo قرار دادیم .
اگه به خط 10 دقت کنید میبینید که React.memo(music) یک مقدار جدید Return کرده به اسم MemoizedMusic .
در واقع خروجی کامپوننت MemoizedMusic با خود کامپوننت Music کاملا یکسانه ! با این تفاوت که کامپوننت MemoizedMusic فقط یکبار render میشه و تا زمانی که props هاش تغییر نکنه ، re-Render نمیشه !
اما کامپوننت Music هر بار render میشه ( فارغ از اینکه props های اون تغییر میکنه یا نه )
بریم سراغ سوال بعدی از لیست سوالات مصاحبه ری اکت ..
اگر ما یک مقدار رو توسط Context به کامپوننت هامون پاس داده باشیم و این مقدار تغییر بکنه ، خود Context به تمام Consumer ها اطلاع میده که re-Render بشن !
مثلا فرض کنید اطلاعات کاربر رو تو Context ذخیره کردیم و نام کاربر رو تو هدر سایت نمایش میدیم.
درصورتیکه این Context خالی بشه ( با Logout کردن کاربر ) کامپوننت هدر re-render میشه تا اسم کاربر از هدر پاک بشه.
این سوال هوشمندانه از این بابت پرسیده میشه تا درک عمیق مارو نسبت به context بسنجن! پس ممکنه بین سوالات استخدامی ریکت قرار داشته باشه
تو ری اکت کلمه ی class یک کلمه رزرو شده در جاوا اسکریپت هست.
به همین دلیل ما برای اینکه بتونیم به Element های خودمون تو JSX کلاس بدیم باید بصورت زیر عمل کنیم :
<div className=’header’>هدر</div>
اگر هدف شما از قرار دادن div به عنوان Wrapper ، افزون استایل است ( مثل hover ) هیچ مشکلی نیست و میتوانید از <div> استفاده کنید .
اما اگر هدف شما برای استفاده از div ، صرفا بحث Wrapper بودن آن است ، قطعا انتخاب های بهتری هم وجود دارد و استفاده از div منطقی نیست .
استفاده از div به عنوان Wrapper خیلی اوغات میتواند مشکلاتی مثل بهم خوردن Style های Css را بهمراه داشته باشند مخصوصا زمانیکه از FlexBox و Grid استفاده میکنید .
به عنوان یک React Developer حرفه ای باید تمام تلاش خودتون رو بکنید که Element اضافی وارد DOM نکنید ! اما زمانیکه از div به عنوان والد استفاده میکنید ، اینکار را میکنید !
راه حل Fragment هست که تو سوال قبلی درموردش صحبت کردیم.
ممکنه که این سوال هوشمندانه در بین سوالات استخدامی ریکت شما قرار داشته باشه. اگه پاسخ مناسبی بهش بدید، فوق العادس چون هرکسی این مورد رو رعایت نمیکنه 🙂
درصورتیکه از Fragment بجای div استفاده کنید مزایای زیر را برای شما خواهد داشت :
استفاده از React.Fragment باعث میشود کد شما تمیزتر و خواناتر باشد .
کامپوننت شما سریعتر Render میشود و از حافظه کمتری استفاده میکند .
استفاده از div به دلیل اینکه ویژگی های بیشتری نسبت به Fragment دارد باعث سنگین شدن صفحه و بارگذاری دیرتر صفحه میشود ، پس زمانیکه از React.Fragment استفاده کنید سرعت بارگذاری صفحه نیز سریعتر خواهد بود .
اگر از div استفاده کنید ، به دلیل تو در تو شدن Element ها در DOM ، دیباگ کردن کد سخت تر خواهد شد ، در مقابل استفاده از Fragment باعث میشود Element کمتری در DOM قرار بگیرد و دیباگ کد راحت تر باشد .
