اگه قصد ورود به بازار کار ری اکت رو دارید و میخواید به عنوان یک React Developer توی یک شرکت استخدام بشید ، لیست سوالات مصاحبه ریکت بشدت براتون ضروریه !! میخوایم 500 سوال از لیست سوالات مصاحبه ری اکت رو باهمدیگه بررسی کنیم تا بتونیم تو جلسه فنی مصاحبه ری اکت به سوالات پاسخ درست بدیم 🙂
میپرسید چرا ؟
چون 95% سوالاتی که از برنامه نویس ها توی مصاحبه های استخدامی ری اکت پرسیده میشه، باهمدیگه مشترکه ! و ما این سوالات رو جمع آوری کردیم و توی این صفحه به همراه پاسخ هاشون براتون قرار دادیم.
پس اگه یک قرار مصاحبه React دارید و استرس دارید که نتونید به سوالات مطرح شده تو مصاحبه فنی پاسخ درست بدید، حتما این لیست سوالات مصاحبه ری اکت رو مطالعه کنید تا بتونید با پاسخ درست به تمامی سوال ها یک موقعیت شغلی خوب بدست بیارید 🙂
ری اکت چیست ؟
ری اکت یک کتابخونه جاوا اسکریپتی هست که توسط فیسبوک تو سال 2013 ساخته شده. کتابخانه ری اکت برای ساختن UI ( رابط کاربری ) برای اپیکیشن های تحت وب کاربرد داره.
ری اکت به ما اجازه میده که اپیکیشن های تحت وب بسیار کارآمد و بهینه رو در مدت زمان خیلی کمی بسازیم!
اینکه ری اکت چیست، جز مرسوم ترین سوالات مصاحبه ری اکت هست که تو هر مصاحبه ای پرسیده میشه.
افزودنی JSX در ری اکت چیست ؟
درواقع JSX در ری اکت یک افزونه جاوااسکریپتی هست که به ما اجازه نوشتن کد های مشابه HTML رو در جاوااسکریپت میده! در واقع JSX به ما اجازه میده که تو فایل های جاوااسکریپتی مثل ری اکت، از HTML استفاده کنیم 🙂
عبارت JSX مخفف JavaScript Syntax extention هست.
بصورت پیشفرض ما نمیتونیم کد های HTML ( تگ های HTML ) رو داخل فایل های جاوااسکریپتی بنویسیم! از اونجاییکه تو ری اکت از جاوااسکریپت استفاده میشه، پس اینجا هم نمیونیم از HTML استفاده کنیم.
راه حل JSX هست 🙂 به کمک JSX میشه از دستورات HMTL داخل فایل های React استفاده کرد..
مفهوم Props در ریکت چیست؟ Props در ری اکت چیکار میکنه ؟
درواقع Props در React برای انتقال یک دیتا از کامپوننت پدر به کامپوننت فرزند کاربرد داره !
درحقیقت Propsها ، ورودی کامپوننت ها هستن ! به کمک Props در React میتونیم به کامپوننت های خودمون ورودی بدیم.
اگه با جاوااسکریپت کار کرده باشید حتما با آرگومان های ورودی توابع آشنا هستین.. آرگومان های ورودی باعث میشدن ما بتونیم به تابع خودمون مقدار پاس بدیم و از اون مقدار در تابع استفاده کنیم.
پراپس در ری اکت معادل آرگومان ورودی توابع در جاوااسکریپت هستن!
میشه گفت که Props ها به کامپوننت ها این اجازه رو میدن که مقادیر داینامیک و سفارشی داشته باشن. ( محتوا و خروجیشون استاتیک و ثابت نباشه ).
در حقیقت Props باعث میشه کامپوننت استاتیک ما ، داینامیک و reUsable ( قابل استفاده مجدد ) باشه . یعنی از یک کامپوننت بارها با اطلاعات متفاوت استفاده کنیم ( عکس ، متن و .. متفاوت )
تو مقاله آموزش Props در ریکت بصورت دقیقتر و تخصصی تر به این موضوع پرداختیم و روش استفاده ، مثال و تیکه کد های Props در React رو قرار دادیم.
درک Props و کاربردش معمولا تو هر جلسه استخدامی ری اکت پرسیده میشه.
مفهوم State در ری اکت چیست ؟ هوک useState در ریکت چیکار میکنه ؟
هوک useState ری اکت به ما این امکان رو میده که حالت ها و مقادیر کامپوننت خودمون رو در جایی ذخیره کنیم. این حالت ها (stateها) میتونن از هر نوعی ( string,number,array,object و..) باشن .
با ذخیره کردن این state ها ، میتونیم تو کل اون کامپوننت ازشون مثل یه متغیر استفاده کنیم و هر زمان نیاز داشتیم مقدارشون رو بروزرسانی کنیم .
در حقیقت State ها ، مقادیر یا حالت های کامپوننت ما هستن و میتونن هر مقداری داشته باشن ( عدد ، رشته ، آبجکت ، آرایه و .. )
مثلا اگر میخوایم نام کاربر رو ذخیره کنیم، باید یک State براش درست کنیم ( اسمش هرچیزی میتونه باشه مثلا name )
چطور از هوک useState در ریکت استفاده کنیم ؟
با ساختن هر state ( توسط useState ) باید یک مقدار اولیه به اون state بدید .
مثلا اگه میخواید Theme اپیکیشن رو داخل state ذخیره کنید ، باید مشخص کنید که مقدار اولیه Theme چی باشه ؟!
تو مثال زیر ما به کمک هوک useState حالت اپیکیشن رو ذخیره کردیم.
تفاوت Props و State در کامپوننت چیست ؟
درواقع State و Props تا حدود زیادی شبیه به همدیگه هستن چون هم Props و هم State یک آبجکت جاوا اسکریپتی هستن و زمانیکه مقدارشون تغییر میکنه، کامپوننت ما re-render میشه.
اما Props در کامپوننت مثل آرگومان ورودی یک تابع هست. درصورتیکه State در کامپوننت حکم یک متغیر در تابع رو داره که میتونه مقادیر مارو ذخیره کنه.
درواقع هرجفتشون برای مدیریت داده تو کامپوننت کاربرد دارن اما اهداف متفاوتی دارن!
پراپس هایی که از کامپوننت والد به کامپوننت فرزند فرستاده میشن صرفا قابل خوندن هستن ( قابل ویرایش نیستن ) درصورتیکه State ها قابل ویرایش هستن.
این سوال از این بابت پرسیده میشه که درک عمیق شمارو نسبت به Props و State بسنجن. پس احتمالش زیاده که بین سوالات مصاحبه ری اکت ، این سوال هم وجود داشته باشه.
مزایای کتابخانه ری اکت چیست ؟ ویژگی های کتابخانه React چیه ؟
کتابخانه ری اکت چندین ویژگی داره که باعث شده پرطرفدارترین کتابخانه جاوا اسکریپتی محسوب بشه.
اولین ویژگی ری اکت دام مجازی در ری اکت هست. Virtual DOM تو ری اکت باعث شده که اپیکیشن های ری اکتی خیلی خیلی بهینه تر بشن .
در حقیقت تو اپیکیشن های ری اکتی ، ما بجای ارتباط مستقیم با DOM اصلی ، با DOM مجازی ارتباط برقرار میکنیم.
بطور خلاصه و ساده Virtual DOM یک نسخه مجازی و کوچک شده از DOM اصلی وبسایت شماست که React از اون برای اعمال سریع تغییرات روی سایت استفاده میکنه.
انجام اینکار باعث میشه که فقط همان اِلِمانی که تغییر داشته ، در UI بروزرسانی بشه .
دام مجازی همانطور که از اسمش هم پیداست ، یک نسخه مجازی از DOM واقعیه .
هربار که چیزی ( اِلِمانی ) در وبسایت ما تغییر میکنه ، بجای اینکه DOM اصلی بروزرسانی بشه ، دام مجازی بروزرسانی میشه .
دومین ویژگی React ، این هست که کامپوننت هایی به ما میده که قابلیت استفاده مجدد دارن ( Reusable Components )
ریکت به ما اجازه میده کامپوننت هایی بسازیم که قابلیت استفاده مجدد دارن. از این کامپوننت ها میتونیم در هر صفحه ای و به هر تعداد که لازم داریم استفاده کنیم. کامپوننت های Reusable فرایند توسعه و مدیریت اپیکیشن رو خیلی راحت تر و سریع تر میکنن.
بطور خلاصه کامپوننت ها در کتابخونه ری اکت یک تیکه کد مستقل و قابل استفاده مجدد هستن. نیازی نیست در هر صفحه اون تیکه کد رو بنویسیم، میتونیم یکبار اون تیکه کد رو در قالب یک کامپوننت بنویسیم و بارها ازش استفاده کنیم.
سومین ویژگی مهم ری اکت این هست که از SSR یا همون رندر سمت سرور پشتیبانی میکنه . این یعنی صفحات ما بجای اینکه در مرورگر render بشن، میتونن سمت سرور render بشن. SSR باعث میشه که اپیکیشن ما با سرعت خیلی بیشتری Render بشه.
همچنین SSR کمک میکنه تا مشکلات سئو تو اپیکیشن خودمون نداشته باشیم.
چهارمین مورد از مزایای کتابخانه ری اکت، وجود هوک های قدرتمند ری اکت هستن. تو نسخه 16.8 ری اکت هوک های کاربردی و فوق العاده ای به React معرفی شد . هر کدوم از این Hook ها کار خاصی برای ما انجام میدن. و وجود داشتن این HOOK ها در ری اکت، قدرت ری اکت رو 2 چندان کرده.
احتمال اینکه این سوال مصاحبه ری اکت رو از شما بپرسن زیاده، چون ما به عنوان یک React Developer باید مزایای این کتابخانه ری اکتی رو بدونیم.
چطور در ری اکت کامپوننت بسازیم ؟ انواع کامپوننت ها در React ؟
بطور کل کتابخانه ری اکت دو نوع کامپوننت داریم :
کامپوننت های تابعی ( Functional Component ) رایج ترین نوع کامپوننت ها تو ری اکت هستن. استفاده کردن از این نوع کامپوننت ها خیلی ساده تره. تو مثال زیر ما یک Functional Component ساختیم :
function Parentheses() { return (<h1> من خروجی این کامپوننت هستم </h1>); }
خود داکیومنت مرجع ری اکت، صادقانه گفته که پیشنهاد نمیشه از Class Component استفاده کنیم! پس همیشه باید سعی کنیم از Functional Component استفاده کنیم .
روش ساختن یک Class Component بصورت زیر هست :
class Car extends React.Component { render() { return <h2>سلام من خروجی این کامپوننتم</h2>; } }
مفهوم Pure Component در ری اکت چیست ؟درحقیقت Pure Component در ریکت یا همون کامپوننت های خالص هیچ مقداری رو خارج از خود کامپوننت تغییر نمیده. اگر مقدار State یا Props این نوع از کامپوننت ها با مقدار مشابه تغییر کنه، کامپوننت re-render نمیشه ( اما تو کامپوننت های عادی این مسئله باعث re-render شدن کامپوننت میشه)
میشه گفت که PureComponent در React با جلوگیری از re-render اضافه باعث بهبود عملکرد اپیکیشن ما میشه.
میشه State رو بصورت مستقیم آپدیت کرد ؟
خیر! تغییر State بصورت مستقیم امکانپذیر نیست و صرفا از طریق متد setState امکانپذیره.
یعنی اگه بخوایم مقدار name رو آپدیت کنیم باید بصورت زیر عمل کنیم :
const [name,setName] = React.useState("جعفر"); setMessage("ممد")
حالا شاید ازمون بپرسن چرا نمیشه state رو مستقیما بروزرسانی کرد ؟
چند دلیل مهم برای این مورد وجود داره.
اولا ری اکت یک قابلیتی داره به اسم Batching! این قابلیت اینجوریه که خود ری اکت در پشت صحنه چندین بروزرسانی state رو بصورت یکجا اعمال میکنه. اینجوری دیگه نیازی نیست به ازای هر تغییر state یکبار re-render انجام بده.
مورد بعدی این هست که ساختار خود state تغییر ناپذیر ( immutable ) هست چون ما میخوایم به تاریخچه state ها دسترسی داشته باشیم.
رندر شرطی ( Conditional Rendering ) چیست ؟
رندر شرطی در ری اکت یک مفهوم بشدت کاربردی هست. به کمک این تکنیک ما میتونیم کامپوننت ها یا اِلِمان های خودمون رو بصورت شرطی رندر کنیم و به کاربر نمایش بدیم .
مثلا میتونیم یک شرط رو بررسی کنیم و با توجه به نتیجه اون شرط، کامپوننت مدنظر خودمون یا کامپوننت های دیگری رو به کاربر نمایش بدیم.
تو شرط زیر ، متغیر isGoal رو بررسی کردیم، درصورتیکه مقدار این متغیر True باشه کامپوننت MadeGoal به کاربر نمایش داده میشه، در غیراینصورت کامپوننت MissedGoal به کاربر نمایش داده میشه :
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
ناگفته نمونه که به چند روش مختلف میشه Conditional Rendering در ریکت رو پیاده سازی کرد که ما تو این مثال رایج ترین روش رو مطرح کردیم.
ممکنه این سوال مصاحبه React رو بصورت عملی از شما بپرسن. یعنی از شما بخوان تو یک محیط زنده ( Live ) کد بزنید و یک شرط در ریکت بنویسید.
مقدار key تو ری اکت چیه و چه کاربردی داره ؟
تو ری اکت اگه ما یک لیست داشته باشیم (مثل لیست کاربران ) یا اگه بخوایم روی یک آرایه متد .map رو اجرا کنیم باید به تک تک اِلِمان های return شده یک پارامتر به نام key بدیم.
این مورد تقریبا اجباریه !
در حقیقت اِلِمان هایی که داریم Return میکنیم باید یک خصوصیت منحصربفرد داشته باشن ( مثل کد ملی برای انسان ها که کاملا منحصر بفرده) پس اِلِمان ها تو react باید خصوصیت منحصربفرد داشته باشن.
برای اینکه بتونیم به Element های خودمون خصوصیت منحصر بفرد یا شناسه یکتا بدیم، میتونیم از key استفاده کنیم.
مثلا زمانیکه روی یک آرایه map میزنیم، میتونیم مقدار index رو به عنوان key به اِلِمان های return شده بدیم تا شناسه یکتا داشته باشن :
const numbers = [1, 2, 3, 4, 5]; const updatedNums = numbers.map((number, index) => <li key={index}> {number} </li> );
اگه به تیکه کد بالا دقت کنید میبینید که به اِلِمان های li خودمون key دادیم.
اما مقدار index نمیتونه یک شناسه یکتا و منحصربفرد خوب باشه، تو سوال بعدی دلیل این مورد رو بررسی میکنیم.
چرا مقدار index در متد map یک شناسه یکتای خوب برای key نیست ؟!
شاید خیلی جاها دیده باشیم که از index به عنوان یک شناسه یکتا و منحصربفرد برای key در متد map استفاده میکنن، اما اینکار اصلا خوب نیست و ممکنه اپیکیشن شمارو دچار مشکل کنه.
چون اگه ترتیب اِلِمان ها تغییر کنه ( مثلا sort بشه ) ری اکت قاطی میکنه!
بهترین مقدار هایی که میشه برای key استفاده کرد، مقادیری هستن که از Back-End دریافت میشه مثل id ها.
بطور مثال اگه لیست کاربران رو از سرور دریافت کردید و میخواید با متد map نمایش بدید ، میتونید آیدی کاربر رو به عنوان key در نظر بگیرید که کاملا منحصر بفرده.
پاسخ صحیح به این سوال مصاحبه ری اکت نشون میده که تجربه کاری خوبی در این زمینه کاری دارید. ضمن اینکه در بین سوالات استخدامی ری اکت، این سوال خیلی زیاد مطرح میشه.
مفهوم ref در ری اکت چیست ؟
عبارت ref مخفف reference هست. تو ری اکت ما برای اینکه بتونیم به Element های موجود در DOM دسترسی داشته باشیم باید یک reference به اون اِلِمان ایجاد کنیم.
در حقیقت زمانیکه میخوایم اون اِلِمان رو وارد DOM کنیم یک ref براش میسازیم تا زمانیکه وارد DOM شد بتونیم بهش دسترسی داشته باشیم.
تو سوال بعدی بررسی میکنیم که چطور باید یک ref برای Element های خودمون در ری اکت بسازیم :
چطور به اِلِمان خودمون در ری اکت ref بدیم ؟
برای ساخت ref در ری اکت، باید از هوک useRef استفاده کنیم.
در مرحله اول باید یک ref به کمک هوک useRef در ریکت بسازیم :
const myRef = useRef();
حالا باید یک این Ref ساخته شده رو به یک اِلِمان بدیم تا وقتی اِلِمان وارد DOM شد بهش دسترسی داشته باشیم:
myRef.current = "FrontEndi"
حالا میتونیم به این اِلِمان دسترسی داشته باشیم. مثلا تو مثال زیر من اِلِمان خودم رو که تو DOM وجود داره در Console چاپ میکنم :
console.log(myRef.current);
دام مجازی ( Virtual DOM ) در ری اکت چیست ؟بطور خلاصه و ساده Virtual DOM یک نسخه مجازی و کوچک شده از DOM اصلی وبسایت شماست که React از اون برای اعمال سریع تغییرات روی سایت استفاده میکنه.
انجام اینکار باعث میشه که فقط همان اِلِمانی که تغییر داشته ، در UI بروزرسانی بشه .
در React ، به ازای هر Element در DOM واقعی ، یک Element در دام مجازی وجود دارد . ( یعنی در ازای هر div در DOM ، یک div با همان خصوصیات و ویژگی ها در دام مجازی وجود دارد )
باتوجه به اینکه دام مجازی ریکت، یکی از اساسی ترین و مهمترین موارد در React بحساب میاد، اکیدا توصیه میکنم خوب درکش کنید چون احتمال اینکه تو مصاحبه استخدامی ریکت، این سوال رو به عنوان یکی از سوالات استخدامی react از شما بپرسن، خیلی خیلی زیاده.
مفهوم reconciliation در ری اکت چیست ؟
این سوال رو احتمالا فقط تو مصاحبه های لول بالا از Senior Front-End Developer ها بپرسن.
دام مجازی ( Virtual DOM ) یک مفهوم برنامه نویسیه که در آن یک نمایش مجازی از UI تو حافظه نگهداری میشه . همگام سازی این دام مجازی با دام واقعی تو ری اکت توسط کتابخونه ReactDOM انجام میشه . به این فرآیند در برنامه نویسی reconciliation میگیم .
پاسخ به این سوال مصاحبه ریکت نشون میده به نحوه کار DOM آشنایی دارید و به خوبی درکش کردید!
تفاوت DOM با Virtual DOM چیست ؟
بروزرسانی DOM خیلی کند و زمانبره اما در عوض بروزرسانی VDOM ( دام مجازی ) خیلی سریعتره !
چون در دام مجازی چیزی در صفحه ، نمایش داده نمیشه .
چرا Virtual DOM سریعتر از DOM هست ؟
به عنوان یک Front-End Enginner باید دلیل سریعتر بودن دام مجازی رو بدونیم .
زمانیکه یک Element به UI وبسایت اضافه میشه ، بلافاصله یک دام مجازی ایجاد میشه .
به محض تغییر در خصوصیات یا حالات هرکدوم از این Element ها ، یک دام مجازی دیگه ایجاد میشه .
در این مرحله VDOM اول با VDOM دوم مقایسه میشه.
بعد از این مقایسه ، مشخص میشه که چه Element هایی تغییر داشتن و باید توی UI هم تغییر کنن .
در این مرحله دام مجازی بهترین و مناسبترین روش برای اعمال این تغییرات به DOM اصلی رو پیدا میکنه و اون تغییرات رو به DOM واقعی اضافه میکنه.
انجام اینکار باعث میشه که کمترین زمان و هزینه برای بروزرسانی DOM صورت بگیره .
توی تصویر زیر میتونید عملیات مقایسه دام مجازی 1 با دام مجازی 2 رو ببینید :
به تصویر بالا دقت کنید .
3 دام مجازی در این پروسه مشخص شده . دایره های آبی رنگ Element هایی هستند که در UI به کاربر نشان میدهیم .
دایره های سبز رنگ ، Element هایی هستن که تغییر وضعیت داشتن .
زمانیکه وضعیت یک Element تغییر میکنه ، بلافاصله یک VDOM ساخته میشه و بصورت کامل با VDOM قبلی مقایسه میشه .
نتیجه مقایسه VDOM اول ( دام قبلی ) با VDOM دوم ( دام فعلی ) یک VDOM جدید هست که وارد DOM واقعی میشه.
ری اکت فایبر چیست ؟
تا قبل از نسخه 16 ری اکت، منطق و معماری Rendering ری اکت مشکلاتی داشت.
همچنین پروسه reconciliation در ریکت مشکلات مشابهی داشت.
فیسبوک که متوجه این مشکلات شده بود در سال 2017 فایبر رو معرفی کرد. React Fiber یکسری تغییرات الگوریتمی روی عملکرد Rendering ریکت اعمال میکرد و مشکلات اون رو رفع میکرد.
در حقیقت نحوه کدنویسی و کار با React هیچ تغییری نکرد، فقط نحوه اجرا و عملکرد الگوریتمی کتابخانه React تغییر کرد. این تغییرات در نسخه 16 ری اکت در سال 2017 در دسترس عموم قرار گرفت.
هدف دیگه ی معرفی React Fiber بهبود کارایی هسته ری اکت تو جاهایی بود که انیمیشن داشتیم یا میخواستیم روی Layout کار کنیم.
احتمالش خیلی کمه که این سوال react از شما پرسیده بشه، اما اگه مطرح شد و جواب شما مناسب بود نشون میده که درک خیلی عمیق و مناسبی نسبت به تغییرات ری اکت از گذشته تا به امروز دارید !
تفاوت متد createElement و cloneElement در JSX چیست ؟
همونطور که میدونیم تو ری اکت از JSX استفاده میکنیم. تو JSX برای اینکه یک Element بسازیم ( مثل div ) باید از متد createElement استفاده کنیم ( البته ری اکت خودش پشت صحنه این متد رو صدا میزنه و نیازی نیست ما این متد رو بنویسیم، هرچند میتونیم اینکارو بکنیم )
درواقع وقتی ما تو کامپوننت خودمون یک اِلِمان JSX مینویسیم ( مثل span ) ری اکت در پشت صحنه متد createElement رو صدا میزنه تا اِلِمان درخواستی مارو بسازه.
اما متد cloneElement زمانی استفاده میشه که کامپوننت والد بخواد Props کامپوننت فرزند خودش رو ویرایش یا اضافه کنه.
همونطور که از اسماشون پیداست، createElement برای ساختن اِلِمان کاربرد داره و cloneElement برای کلون کردن اون اِلِمان کاربرد داره.
مفهوم Lifting State Up در ری اکت چیست ؟
همونطور که میدونیم کامپوننت های ری اکت میتونن شامل State هایی باشن که بهشون نیاز دارن.
در حقیقت میتونیم داده های هر کامپوننت رو بوسیله State تو خود کامپوننت ذخیره کنیم.
حالا فرض کنید یک کامپوننت داریم که 2 کامپوننت فرزند داره و میخوایم یک داده مشترک رو تو هر 2 کامپوننت استفاده کنیم.
برای این سناریو 2 راه داریم :
منطقا روش 2 ، روش بهتریه چون بجای State جداگانه ، یک State مرجع ساختیم.
درواقع Lift Up State همونطور که از اسمش پیداست به این معنی هست که State خودمون رو به کامپوننت والد منتقل کنیم.
فرض کنید یک کامپوننت والد به اسم A داریم.
این کامپوننت والد دو کامپوننت فرزند به اسم B و C داره:
فرض کنید تو کامپوننت B یک input داریم و میخوایم که مقدار تایپ شده در کامپوننت C نمایش داده بشه.
اگه مقدار تایپ شده در input رو تو کامپوننت B ذخیره کنیم به مشکل میخوریم.
تو این سناریو کافیه که به کمک تکنیک Lifting State Up ، صرفا State خودمون رو در کامپوننت والد (A) نگهداری و مدیریت کنیم.
همچنین گاهی اوغات که دیتا ها بین 2 کامپوننت یکسان هستن، نیازی به ساخت دو State نیست، صرفا ساختن یک State در کامپوننت والد کافیه.
چرخه حیات کامپوننت ( Lifecycle ) چیست ؟
تو ری اکت هر کامپوننت یک چرخه حیات داره. Lifecycle در ریکت همونطور که از اسمش هم پیداست به ما کمک میکنه تو پروسه حیات یک کامپوننت اون رو مدیریت و دستکاری کنیم :
از بین سوالات مصاحبه react ، این سوال یکی از مهمترین موارد به شمار میاد!
مفهوم Higher-Order-Component چیست ؟ HOC چیست ؟
درواقع HOC یا Higher-Order-Components در ری اکت یکی از مهمترین ویژگی های کتابخونه ری اکت هست که به ما اجازه میده از یک منطق ( Logic ) در چندین کامپوننت استفاده کنیم.
میشه گفت HOC به ما این اجازه رو میده که یک قابلیت یا ویژگی رو به کامپوننت های خودمون اضافه کنیم، بدون اینکه اون کامپوننت هارو تغییر بدیم ( کدشون رو ویرایش کنیم ).
در واقع Higher-Order-Components در ری اکت از ما یک کامپوننت به عنوان ورودی میگیره و یک کامپوننت بروز شده تحویل میده.
بطور مثال ما میتونیم قابلیت احراز هویت ( Authentication ) رو به کامپوننت ها و صفحات خودمون به صورتی اضافه کنیم که لازم نباشه هیچ تغییری در کامپوننت ها و صفحات خودمون اعمال کنیم!
ممکنه از بین سوالات استخدامی ریکت ، این سوال رو بصورت عملی از شما درخواست کنن تا یک HOC ایجاد کنید.
ویژگی های HOC ( Higher Order Component ) چیست ؟
برای Reusable کردن یک تیکه کد کاربرد داره.
کامپوننت هارو ویرایش نمیکنه، بلکه یک نسخه بروز شده از اون کامپوننت میسازه.
مفهوم Context در ریکت چیست ؟
کانتکس یا همون Context یک روش انتقال داده از کامپوننت والد به کامپوننت فرزند هست ( بدون اینکه اون داده رو مثل Props از کامپوننت والد به فرزند پاس بدیم )
تو Context ما یک داده ( Data ) رو میتونیم در جایی ذخیره کنیم ( مثل Store در Redux ) و میتونیم از این مقدار ذخیره شده در هر کامپوننتی استفاده کنیم.
به تصویر زیر دقت کنید :
بزرگترین مشکلی که تو این روش داریم ، اینه که دیتای ما داره به کامپوننت هایی ارسال میشه که تو اون کامپوننت ها اصلا به اون دیتا ها نیاز نداریم !!
در واقع تو کامپوننت 2 ما نیازی به اون دیتا ها نداریم ولی برای اینکه بتونیم دیتای خودمون رو به کامپوننت شماره 4 برسونیم ، باید از کامپوننت شماره 2 و 3 هم عبورشون بدیم .
حالا فرض کنید تعداد کامپوننت های درخت ما 20 تا باشه و بخوایم یه دیتایی رو از کامپوننت 1 به آخرین فرزند این درخت ( کامپوننت 20 ) بفرستیم ، اینجوری باید اون Data رو از طریق تک تک Component ها انتقال بدیم .
به اینکار میگن Props Drilling و اصلا اصلا پیشنهاد نمیشه !
اما خبر خوب اینه که یه روش بهتری برای اینجور وقتا داریم به اسم Context یا همون useContext 🙂
اگه به تصویر بالا دقت کنید ، یک Context ساختیم که نقش منبع دیتا رو ایفا میکنه .
حالا از تمامی کامپوننت هایی که داریم ، میتونیم به این منبع Data بصورت مستقیم دسترسی داشته باشیم .
دیگه اینجا مشکل Props Drilling نداریم !
خیلی راحت از کامپوننت شماره 4 به Data مورد نیاز دسترسی پیدا کردیم، بدون اینکه اون Data رو وارد کامپوننت های دیگه بکنیم .
در حقیقت React Context یک روش انتقال داده بین کامپوننت های مختلف اپیکیشن شماست بدون توجه به عمق اون Component !
کاربرد Context در ری اکت چیه ؟ چه زمانهایی باید ازش استفاده کنیم ؟
از Context در ری اکت برای به اشتراک گذاری دیتا های Global مثل تنظیمات کاربر ، تم ( دارک مود و لایت مود ) و … میشه استفاده کرد.
ایده اصلی Context این هست که به ما اجازه میده یک مقدار رو بین کامپوننت های مختلف به اشتراک بزاریم و هر زمان این مقدار تغییر کرد ، اون کامپوننتی که از مقدارمون استفاده کرده بوده ، مجدد رندر بشه .
در حقیقت بهتره بگیم از Context برای به اشتراک گذاری State هایی استفاده میکنیم که میخوایم تو بخش های مختلف اپیکیشن در دسترس باشن .
مواردی مثل :
باتوجه به اهمیت context ، ممکنه این سوال در بین سوالات مصاحبه react قرار بگیره.
درصورت تغییر مقدار Context چه اتفاقی میوفته ؟
اگر ما یک مقدار رو توسط Context به کامپوننت هامون پاس داده باشیم و این مقدار تغییر بکنه ، خود Context به تمام Consumer ها اطلاع میده که re-Render بشن !
مثلا فرض کنید اطلاعات کاربر رو تو Context ذخیره کردیم و نام کاربر رو تو هدر سایت نمایش میدیم.
درصورتیکه این Context خالی بشه ( با Logout کردن کاربر ) کامپوننت هدر re-render میشه تا اسم کاربر از هدر پاک بشه.
این سوال هوشمندانه از این بابت پرسیده میشه تا درک عمیق مارو نسبت به context بسنجن! پس ممکنه بین سوالات استخدامی ریکت قرار داشته باشه.
ویژگی Props Children در ری اکت چیست ؟
شاید تو کامپوننت های ری اکتی به عبارت props.children برخورده باشید. اما بریم ببینیم که Props Children در ری اکت چیست ؟
تمامی کامپوننت هایی که تو ری اکت داریم، میتونن children داشته باشن.
به مثال زیر دقت کنید:
<App> <Image src=”/asset/profile-img.png” /> <Detail name=”فرانت اندی” surname=”مرجع تخصصی فرانت اند” /> </App>
تو مثال بالا کامپوننت App دو فرزند ( children ) داره اما کامپوننت های Image و Detail هیچ فرزندی ندارن.
درواقع تو JSX میتونیم به 2 صورت کامپوننت بنویسیم :
<Component/>
<Component> فرزند کامپوننت</Component>
تو مدل اول کامپوننت ما فاقد فرزند هست اما تو مدل دوم کامپوننت ما فرزند ( children ) داره.
تو مدل دوم ما هر اِلِمان یا کامپوننتی رو میتونیم به عنوان children به کامپوننت خودمون پاس بدیم.
مثلا فرض کنید ما میخوایم یک کامپوننت اسلایدر بسازیم. ما نیاز داریم که به اسلایدر خودمون چندین تصویر پاس بدیم تا نمایش داده بشه.
دقیقا میخوایم بصورت زیر از کامپوننت Slider استفاده کنیم :
<Slider> <img src=”/assets/img-1.pg” /> <img src=”/assets/img-2.pg” /> <img src=”/assets/img-3.pg” /> </Slider>
الان کامپوننت Slider یک Props داره که اسمش children هست. یعنی برای نمایش این تصاویر که با props children دریافت کردیمشون، باید کامپوننت Slider رو اینجوری بنویسیم :
export default function Slider(props) { return ( <div className=”img-slider”> {props.children} </div> ); }
تو کامپوننت Slider تونستیم Props های دریافت شده بصورت children رو داخل یک div قرار بدیم و نمایش بدیم.
تو ری اکت چطور کامنت ( Comment ) بنویسیم ؟
برای اینکه تو اپیکیشن ری اکت خودمون کامنت بنویسیم، کافیه بصورت زیر عمل کنیم :
{/* من کامنت شدم و اجرا نمیشم */}
چرا تو ری اکت از className بجای class استفاده میکنیم ؟
تو ری اکت کلمه ی class یک کلمه رزرو شده در جاوا اسکریپت هست.
به همین دلیل ما برای اینکه بتونیم به Element های خودمون تو JSX کلاس بدیم باید بصورت زیر عمل کنیم :
<div className=’header’>هدر</div>
مفهوم Fragment در ری اکت چیست ؟
کامپوننت هایی که در React ایجاد میکنیم از این 2 حالت خارج نیستند :
در ری اکت ، اگر قصد داشته باشیم 2 یا چند Element برگردانیم ( Return کنیم ) باید تمامی آنها را داخل یک Element مثل div قرار دهیم .
چون طبق قانون JSX ، تمامی اِلِمان ها ( Elements ) باید یک والد داشته باشند .
ما میتونیم حتی از یک اِلِمان div به عنوان Parent اِلِمان های خودمون استفاده کنیم اما این کار درستی نیست و کار بهتر استفاده از ویژگی Fragment هست که توسط خود React معرفی شده.
تو سوال بعدی بررسی میکنیم که چرا نباید از div یا سایر اِلِمان های JSX به عنوان والد اِلِمان ها استفاده کرد و استفاده از Fragment گزینه بهتریه .
روش استفاده از Fragment به عنوان والد چندین Element بصورت زیر هست :
const App = () => { return ( <Fragment> // من دور اِلِمان ها پیچیده شدم <h1>من آیتم اول این کامپوننت هستم</h1> <p>من آیتم دوم این کامپوننت هستم</p> </Fragment> ); } export default App
آیا میشه از div به عنوان Wrapper استفاده کرد ؟
اگر هدف شما از قرار دادن div به عنوان Wrapper ، افزون استایل است ( مثل hover ) هیچ مشکلی نیست و میتوانید از <div> استفاده کنید .
اما اگر هدف شما برای استفاده از div ، صرفا بحث Wrapper بودن آن است ، قطعا انتخاب های بهتری هم وجود دارد و استفاده از div منطقی نیست .
استفاده از div به عنوان Wrapper خیلی اوغات میتواند مشکلاتی مثل بهم خوردن Style های Css را بهمراه داشته باشند مخصوصا زمانیکه از FlexBox و Grid استفاده میکنید .
به عنوان یک React Developer حرفه ای باید تمام تلاش خودتون رو بکنید که Element اضافی وارد DOM نکنید ! اما زمانیکه از div به عنوان والد استفاده میکنید ، اینکار را میکنید !
راه حل Fragment هست که تو سوال قبلی درموردش صحبت کردیم.
ممکنه که این سوال هوشمندانه در بین سوالات استخدامی ریکت شما قرار داشته باشه. اگه پاسخ مناسبی بهش بدید، فوق العادس چون هرکسی این مورد رو رعایت نمیکنه 🙂
مزیت استفاده از Fragment بجای اِلِمان های JSX چیه ؟
درصورتیکه از Fragment بجای div استفاده کنید مزایای زیر را برای شما خواهد داشت :
استفاده از React.Fragment باعث میشود کد شما تمیزتر و خواناتر باشد .
کامپوننت شما سریعتر Render میشود و از حافظه کمتری استفاده میکند .
استفاده از div به دلیل اینکه ویژگی های بیشتری نسبت به Fragment دارد باعث سنگین شدن صفحه و بارگذاری دیرتر صفحه میشود ، پس زمانیکه از React.Fragment استفاده کنید سرعت بارگذاری صفحه نیز سریعتر خواهد بود .
اگر از div استفاده کنید ، به دلیل تو در تو شدن Element ها در DOM ، دیباگ کردن کد سخت تر خواهد شد ، در مقابل استفاده از Fragment باعث میشود Element کمتری در DOM قرار بگیرد و دیباگ کد راحت تر باشد .
کامپوننت stateless چیست ؟
اگه یک کامپوننت داشته باشیم که داخلش هیچ State داخلی نداشته باشیم، به اون کامپوننت stateless Component میگیم. یعنی کامپوننت بدون State !
کامپوننت statefull چیست ؟
اگه تو کامپوننت خودمون حداقل یک state داشته باشیم ( به کمک هوک useState ) این یعنی کامپوننت ما stateFull هست.
در کل به کامپوننت هایی که State داخلی دارن statefull component میگیم.
معایب کتابخانه ری اکت چیست ؟ معایب ریکت ؟
درمورد معایب ری اکت میشه یه مقاله مفصل نوشت اما با توجه به ماهیت این مقاله که میخوایم به سوالات استخدامی ریکت بپردازیم، خلاصه گویی میکنیم.
ری اکت یک کتابخونه جاوا اسکریپتی هست که بشدت در معرض تغییره! تو نسخه های قبلی منتشر شده از ری اکت به وضوح دیدیم که چقدر تغییرات گسترده ای داشته.
بطور مثال اضافه شدن هوک ها ، منسوخ شدن class Component ها و …
قطعا این تغییرات مفید بودن اما خب پروژه هایی که با React توسعه داده میشن همیشه باید بروزرسانی بشن.
این شما هستید که باید انتخاب کنید که حاضر به بروزرسانی مداوم پروژه هستید یا نه! ( کتابخونه های دیگه ای هستن که سرعت تغییر خیلی پایین تری دارن )
اگه به معماری MVC نگاه کنیم میبینیم که کتابخانه ری اکت فقط بخش View رو داره کنترل میکنه! و برای Controller و Model به ابزار ها و کتابخانه های جانبی احتیاج داره.
همین باعث میشه که ساختار و الگو های ضعیفی داشته باشیم. درصورتیکه در فریمورک های جاوااسکریپتی مثل Angular چنین مشکلاتی رو نداریم!
گرچه این مورد ثابت نشده اما تجربه نشون داده که Crawler ها توانایی مناسبی در سئو کردن سایت های ری اکتی ندارن. این صرفا در حد یک نگرانیه و البته که راه حل هایی برای این مشکل وجود داره.
اما بهرحال سئو در ریکت یکی از چالش های اصلی این کتابخونه ی دوست داشتنیه.
دونستن معایب کتابخانه React نشون میده که شما درک عمیقی از این کتابخانه دارید، پس احتمالش زیاده که از بین سوالات استخدامی React ، این سوال هم از شما پرسیده بشه.
پکیج ReactDOM که تو ری اکت استفاده میشه چیه و چه کاربردی داره ؟
اگه با ری اکت کار کرده باشید حتما به 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 خودتون پاس بدید.
مزیت این روش این هست که دیگه نگران اسم تکراری class های خودتون نیستید، چون اون کلاس فقط در همون کامپوننت قابلیت استفاده داره.
برای اینکه یک فایل CSS Modules بسازیم باید آخر اسم فایل css ، عبارت module.css. رو قرار بدیم.
مثلا اسم فایل ما style.module.css باشه . حالا میتونیم داخلش استایل های معمولی css رو قرار بدیم.
چطوری یک کامپوننت رو memo کنیم ؟
در حقیقت 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 های اون تغییر میکنه یا نه )
درک memo نشون میده که به مبحث Performance و بهینه سازی اپیکیشن های ری اکتی، مسلط هستیم.این احتمال وجود داره که از بین سوالات استخدامی ری اکت، این سوال هم مطرح بشه.
چه جاهایی باید از memo در ری اکت استفاده کنیم ؟
جاهایی که فکر میکنید کامپوننت با Props های یکسان render میشه !
یکی از بهترین جاهایی که میشه از react.memo استفاده کرد ، کامپوننت هایی هستن که اغلب با Props های یکسان render میشن !
استفاده اشتباه از memo باعث کاهش Performance اپیکیشن ما میشه ؟
قطعا!
درصورت استفاده از memo در جای اشتباه ، Performance اپیکیشن شما کاهش پیدا خواهد کرد!
فرض کنید یک کامپوننتی رو به memo دادید که همیشه Props های متفاوتی داره .
با انجام اینکار ، ری اکت هربار که Props های این کامپوننت رو با نسخه کش شده بررسی میکنه ،همیشه به false میرسه ( یعنی Props ها متفاوت هستن ! )
و خب اینجا یعنی ری اکت یک مرحله مقایسه اضافه انجام داده که خودش باعث کاهش Performance اپیکیشن میشه .
نه تنها هیچ مزیتی بدست نمیارید ، کلی قضیه رو پیچیده تر هم میکنید !
اگه این سوال در بین سوالات مصاحبه react شما وجود داشته باشه، نشون میده که Performance برای اون شرکت حائز اهمیته.
یک کامپوننت رو memo کنیم و Stateش تغییر کنه، re-render میشه ؟
اصلا مهم نیست که کامپوننت memo شده باشه یا نه!
تغییر State یک کامپوننت همیشه باعث re-Render شدنش میشه ! حتی اگه داخل ()memo باشه .
چطور تو ری اکت SSR یا همون Server Side Rendering انجام بدیم ؟
تکنیک SSR یا همون Server Side Rendering یک تکنیک معروفه که باعث میشه بجای render صفحه سمت client ، رندر صفحه در سمت server انجام بشه. نتیجه رندر یک صفحه HTML کامل هست که به client ارسال و نمایش داده میشه.
برای اینکه یک کامپوننت رو در سمت سرور render کنیم باید بصورت زیر از ReactDOMServer استفاده کنیم:
ReactDOMServer.renderToString(<Blog />);
به کمک متود ReactDOMServer در ری اکت میتونیم رندر سمت سرور ( SSR ) داشته باشیم. البته این موضوع خیلی مفصله و حتما در یک مقاله جداگانه بررسیش میکنیم.
برای شرکت هایی که به سئو اهمیت میدن، این احتمال وجود داره که حداقل یک سوال ری اکت از مبحث SSR از شما بپرسن.
مفهوم Lifecycle کامپوننت در ری اکت چیست ؟ چرخه حیات کامپوننت در ریکت یعنی چه ؟
تو ری اکت، کامپوننت ها یک طول عمر ( چرخه حیات ) دارن !
این چرخه حیات از زمان ساخته شدن اون کامپوننت شروع میشه و تا هنگامی که اون کامپوننت از بین میره، ادامه داره.
تو این حین ما میتونیم رفتار کامپوننت خودمون رو مدیریت کنیم.
مراحل چرخه حیات کامپوننت ها در ریکت رو نام ببرید ؟
چرخه حیات کامپوننت در ری اکت شامل سه مرحله میشه :
منظور از mounting در Component lifecycle چیست ؟
درواقع mounting اولین مرحله از سه مرحله چرخه حیات کامپوننت در react هست.
این مرحله زمانی هست که کامپوننت ما ایجاد میشه و وارد DOM میشه. به عبارتی زمانیکه کامپوننت ما متولد میشه و زندگی خودش رو آغاز میکنه، مرحله mounting در کامپوننت میگیم.
منظور از updating در Component lifecycle چیست ؟
به زمانیکه کامپوننت ما به دلیل تغییر State یا تغییر Props، مجدد رندر میشه ( re-render میشه ) مرحله updating میگیم!
منظور از unmounting در Component lifecycle چیست ؟
به زمانیکه کامپوننت ما از DOM حذف میشه و دیگه نمایش داده نمیشه، مرحله unmounting کامپوننت میگیم.
تو این مرحله میتونیم کنترل کنیم زمانیکه کامپوننت ما داشت از DOM حذف میشد، چه اتفاقی بیوفته.
متود constructor در ری اکت چیست ؟
این متد، اولین متدی هست که در زمان mounting کامپوننت اجرا میشه ( زمانیکه کامپوننت وارد DOM میشه ).
این متود تو کامپوننت های کلاسی ( class component ) کاربرد داره .
داخل متد constructor نمیتونیم هیچ ساید افکتی ( Side Effect ) اجرا کنیم! چون اساسا این متد یک متد pure هست! مثلا نمیتونیم داخلش یک درخواست HTTP یه سرور بزنیم و اطلاعات مدنظرمون رو دریافت کنیم!
متد static getDerivedStateFromProps در ری اکت چیست ؟
به کمک متد getDerivedStateFromProps در ری اکت میتونیم State خودمون رو باتوجه به Props تغییر بدیم. این موضوع زمانهایی خیلی کاربرد داره که State ما قراره از طریق Props دریافت بشه.
متود render در ری اکت چیست ؟
این متد تنها متد ضروری برای Class Component ها هست و در فاز Mounting ( قرار گرفتن کامپوننت در DOM ) اجرا میشه.
تو متد render در class Component ها نباید هیچ ساید افکتی ( side effect ) قرار بدیم. چون اساسا متد render یک متد Pure هست. بطور مثال ما نباید State خودمون رو اینجا تغییر بدیم، یا از سرور یکسری اطلاعات درخواست کنیم ( Http Request ) یا با Local Storage کار کنیم و ..
متد render در ریکت دقیقا بعد از متد قبلی ( getDerivedStateFromProps ) اجرا میشه.
متود componentDidMount در ری اکت چیست ؟
آخرین متدی که تو فاز Mounting ( قرار گرفتن کامپوننت در DOM ) اجرا میشه، متد componentDidMount در ری اکت هست.
به کمک متود componentDidMount میتونیم ساید افکت ( side effect ) های خودمون رو اجرا کنیم.( مثل ارسال درخواست های HTTP به سرور و دریافت اطلاعات ) یا بروزرسانی State های کامپوننت.
متود static getDerivedStateFromProps در ری اکت چیست ؟
تو فاز Updating ( هنگام re-render شدن کامپوننت) اولین متودی که اجرا میشه متود getDerivedStateFromProps هست.
این متود زمانی خیلی کاربردیه که Props ما تغییر میکنه و ما میخوایم با توجه به Props تغییر کرده، State خودمون رو بروزرسانی کنیم.
متود shouldComponentUpdate در ری اکت چیست ؟
به کمک متود shouldComponentUpdate میتونیم به ری اکت بگیم که درصورت تغییر State یا Props نیازی نیست re-render بشه. ( این اتفاق در حالت عادی میوفته )
این متود کمک میکنه که از re-render های غیرضروری جلوگیری کنیم، اما خیلی با احتیاط باید ازش استفاده کنیم چون ممکنه جاهایی که نیاز به re-render داریم، کامپوننت ما re-render نشه.
خروجی این متود یک مقدار boolean هست که تعیین میکنه کامپوننت ما re-render بشه یا نشه .مقدار پیشفرض true هست که باعث میشه درصورت تغییر State یا Props، همیشه re-render داشته باشیم.
متود getSnapshotBeforeUpdate در ری اکت چیست ؟
این متود به ما اجازه میده که به مقدار قبلی Props و State دسترسی داشته باشیم. ( قبل بروزرسانی کامپوننت )
متود componentDidUpdate در ری اکت چیست ؟
به کمک متود componentDidUpdate در ری اکت میتونیم ساید افکت ( Side Effect ) های خودمون رو اجرا کنیم. مثل دریافت اطلاعات از سرور ( Http Request ) یا بروزرسانی State های کامپوننت!
متود componentDidUpdate در ریکت میتونه 3 آرگومان از ما بگیره که عبارتند از : prevProps ، PrevState و snapshot .( آرگومان snapshot فقط درصورتی دریافت میشه که از متود getSnapshotBeforeUpdate استفاده کرده باشیم.
نکته ای که وجود داره این هست که این متود آخرین متود فاز updating در component lifecylce ری اکت هست.
متود componentWillUnmount در ری اکت چیست ؟
متود componentWillUnmount در ری اکت دقیقا قبل از حدف شدن کامپوننت از DOM اجرا میشه. اگه ما بخوایم توی کامپوننت خودمون یکسری موارد clean up اجرا کنیم، باید از این متود استفاده کنیم. مثل cancel کردن درخواست های شبکه!
بعد از اجرای این متد، کامپوننت از DOM حذف میشه.
حالت StrictMode در ریکت چیست ؟
قابلیت StrictMode به شما کمک میکنه که در مراحل فاز توسعه پروژه ( فاز Development ) باگ ها و مشکلات رایج پروژتون رو پیدا کنید .
در واقع StrictMode حالت سخت گیرانه ری اکت هست ! این ابزار فقط در فاز Development کاربرد داره و به شما کمک میکنه که مشکلات پروژتون رو در زمان توسعه پیدا کنید و اونهارو فیکس کنید .
در حقیقت وقتی حالت StrictMode رو در ری اکت فعال میکنیم ، در پشت صحنه react یکسری بررسی های اضافی روی اپیکیشن ما صورت میگیره تا کوچکترین مشکلات و باگ های احتمالی ، به ما اطلاع داده بشه .
میشه تو JSX از متود map استفاده کرد؟
بله 🙂
تو مثال زیر ما از متود map داخل JSX استفاده کردیم :
<div> {items.map((item) => ( <YeComponent key={item.id} title={item.title} /> ))} </div>
چطور به یک اِلِمان ( Element ) در ری اکت کلاس ( className ) شرطی بدیم ؟
براحتی میتونیم یک شرط رو بررسی کنیم و باتوجه به نتیجه اون شرط، کلاس دلخواه خودمون رو به یک اِلِمان بدیم :
<div className={darkMode ? ‘bg-gray-600’ : ‘bg-white’}> فِرانت اِندی </div>
چطور درصورت تغییر یک State، یک کاری رو انجام بدیم؟
برای اینکه درصورت تغییر یک State مشخص، یک کاری رو انجام بدیم، باید به اون State گوش بدیم.
یعنی حواسمون باشه که هر زمان اون State تغییر کرد، کار دلخواه ما صورت بگیره .
برای پیاده کردن چنین سناریویی، هوک useEffect به ما کمک میکنه.
صرفا کافیه اون State دلخواه رو به عنوان Dependencies به هوک useEffect پاس بدیم تا حواسش به State ما باشه :
const [count,setCount] = useState(); useEffect(() => { // کار دلخواه ما که درصورت تغییر استیت اجرا میشه }, [count]);
میشه Props های ری اکت رو تغییر داد ؟
خیر !
به 2 دلیل نمیتونیم Props ها در ری اکت رو تغییر بدیم :
داده ها در React ، همیشه از بالا به سمت پایین منتقل میشن. یعنی از کامپوننت والد به کامپوننت فرزند!
در نتیجه کامپوننت فرزند صرفا توانایی خوندن و استفاده از props رو داره و نمیتونه اون props رو تغییر بده .
به اصطلاح Props ها صرفا read-only هستن.
از بین سوالات استخدامی react ، چنین سوالاتی معمولا از Senior ها پرسیده میشه که تسلط و تجربه بالایی در کار با React دارن.
چطور میشه نسخه ری اکت استفاده شده در اپیکیشن رو متوجه شد ؟
ساده ترین راه استفاده از React.version هست که به ما نسخه استفاده شده در ری اکت پروژه رو بهمون برمیگردونه :
<div>{`نسخه ری اکت : ${React.version}`}</div>,
تفاوت Component و Element در ری اکت چیست ؟ تفاوت کامپوننت و اِلِمان در ری اکت چیه ؟
قبل از اینکه تفاوت Component و Element در ری اکت رو بررسی کنیم، اجازه بدید یادآوری کنیم که اصلا خود Element و Component چی هستن و چه تعریفی دارن.
اِلِمان در ری اکت پایه ای ترین جز اپیکیشن هست که به ما اجازه میده اپیکیشن خودمون رو بسازیم.هر Element یک Type و Propery داره. ممکنه Element ها دارای فرزند باشن. ( مثل یک div که شامل چندین span میشه )
اِلِمان ها هیچ متودی ندارن.
رندر شدن Element ها خیلی سریع صورت میگیره چون اصولا سبک هستن.
تو تیکه کد زیر یک Element ساختیم که اسمش el هست :
const el = <h1>FrontEndi.com</h1>;
همچنین ما میتونیم به کمک متود React.createElement یک Element در ریکت بسازیم :
const el = React.createElement(‘h1’, { id: ‘site’ }, ‘فرانت اندی’);
حالا بریم ببینیم کامپوننت چیه ؟
کامپوننت یک تیکه کد مستقل و قابل استفاده مجدد هست ( reusable )
خروجی کامپوننت، مجموعه ای از Element هاست.
کامپوننت ها میتونن Class Component باشن یا Functional Component !
تو مثال زیر ما یک کامپوننت ساختیم که نام کاربر رو دریافت میکنه و عبارت خوش آمدی {نام کاربر} رو برمیگردونه :
function SayWelcomeToUser({name}) { return <div>
<h3>Welcome {name}</h3> </div> }
حالا بریم ببینیم تفاوت Component و Element در ریکت چیه ؟
تفاوت Class Component و Functional Component چیست ؟
میدونیم که کامپوننت ها در ری اکت میتونن کلاسی ( class ) یا تابعی ( functional ) باشن. اما تفاوت این 2 نوع کامپوننت چیه ؟
کامپوننت های تابعی ( Functional Component ) خیلی ساده هستن ! دقیقا مثل توابع جاوااسکریپتی نوشتن میشن و دردسر کامپوننت های کلاسی ( class Component ) رو تو نوشتن ندارن ( استفاده از متود render و extends و .. )
مثلا تو مثال زیر یک کامپوننت تابعی در ری اکت ساختیم :
const Car=()=> { return <h2>سلام! من یه پیکانم</h2>; }
کامپوننت های کلاسی ( class Component در ری اکت ) پیچیدگی بیشتری داره. تو کامپوننت های کلاسی ( class component ) نمیتونیم از هوک ها در ری اکت استفاده کنیم.
در نتیجه بخش عظیمی از قابلیت ها و ویژگی های ری اکت رو از دست میدیم.
در عوض تعداد خیلی زیادی از متود های مدیریت Lifecycle رو در Class Component ها داریم که تو Functional Component ها خبری ازشون نیست.
تو مثال زیر،همون کامپوننت Car رو از نوع کامپوننت کلاسی ساختیم :
class Car extends React.Component { render() { return <h2>سلام! من یه پیکانم<h2>;/ } }
حالا بریم چند تفاوت Class Component و Functional Component در ری اکت رو ببینیم:
چرا از callback ( توابع بازگشتی ) هنگام setState ( بروزرسانی state ) استفاده میکنیم ؟
گاهی اوغات لازمه که بصورت مستقیم از setState استفاده نکنیم و بروزرسانی state خودمون رو به کمک یک callback انجام بدیم. مثل :
setCount(prevCount => prevCount + 1);
اگه تو سوالات استخدامی ری اکت از ما پرسیدن چه زمانی از callback برای setState کردن باید استفاده کنیم، میتونیم جواب زیر رو بدیم :
هر زمان بروزرسانی State ما، وابسه به مقدار قبلی State بود باید به کمک callback ، مقدار State خودمون رو بروز کنیم.
مثلا اگه میخوایم با هر کلیک کاربر، مقدار State رو یکی بیشتر کنیم ( چون اینجا setState با توجه به مقدار قبلی State داره صورت میگیره باید به کمک callback این بروزرسانی رو انجام بدیم ). یعنی اینجوری :
const [count, setCount] = useState(0); setCount(prevCount => prevCount + 1);
اما اگه پرسیدن چرا باید زمانیکه setState وابسه به مقدار قبلی state بود از callback استفاده کنیم ، میتونیم بگیم که :
چون خود هوک useState به ما مقدار قبلی state رو نمیده. تنها راهی که میتونیم به مقدار قبلی state دسترسی داشته باشیم، callback function هست.
چطور از ref در ریکت استفاده کنیم ؟ چطور از هوک useRef در ریکت استفاده کنیم ؟
بطور کل برای استفاده از هوک useRef در ری اکت باید 3 مرحله زیر رو انجام داد :
ساختن Ref :
const myRef = useRef();
اختصاص مقدار به Ref :
myRef.current = "FrontEndi"
دسترسی به مقدار Ref :
console.log(myRef.current);
برای دسترسی به Element های موجود در Dom شما باید طبق 3 مرحله بالا عمل کنید . یعنی :
یک ref به کمک ()useRef بسازید .
یک Element به آن ref اختصاص دهید.
حالا مطابق مرحله 3 میتوانید به Element موجود در DOM دسترسی داشته باشید.
مفهوم forwardRef در ری اکت چیست ؟
میشه گفت که forwardRef در ری اکت یک ویژگی بسیار کاربردی هست که به ما اجازه میده یک ref رو از کامپوننت والد، به کامپوننت فرزند منتقل کنیم.
تو مقاله forwardRef در ری اکت بصورت جامع و تخصصی این ویژگی رو بررسی کردیم.
بدون forwardRef امکان ارسال props از کامپوننت والد به کامپوننت فرزند رو نداریم.
پورتال در ری اکت چیست ؟ پورتال در ری اکت چیست ؟
پورتال در ری اکت یک ویژگی حرفه ای هست که به توسعه دهنده های React این امکان رو میده که Element های خودشون رو خارج از سلسه مراتب درختی React ، رندر کنن.
اکثر Element ها یا Component ها تو ری اکت داخل سلسله مراتب درختی ری اکت render میشن و این کار رو برای ما دشوار میکنه اگه بخوایم مودال یا پاپ آپ نمایش بدیم.
پورتال در ریکت چه جاهایی استفاده میشه ؟
در کل هرجایی که ما میخوایم یک Element رو بالاتر از سایر Element ها و خارج از سلسله مراتب درختی ری اکت render کنیم، میتونیم از پورتال در ریکت استفاده کنیم. چند مورد از کاربرد Portal در ری اکت :
چطور میتونیم Props های هر کامپوننت رو اعتبار سنجی کنیم ؟ بررسی تایپ Props چجوریه ؟
ما میتونیم Props های کامپوننت های خودمون رو چک کنیم تا type صحیحی داشته باشن و درصورتیکه Type اشتباهی داشتن ما warning دریافت کنیم.
مثلا یکی از props های ما که اسمش name هست، صرفا باید string بگیره و اگه number بهش فرستاده شد، این اشتباهه و ما باید warning بگیریم تا مطلع بشیم.
کتابخانه های مختلفی وجود دارن که نوع Props کامپوننت رو چک میکنن ( prop type )
یکی از معروف ترینشون کتابخانه prop-types در ری اکت هست.
مثلا میتونیم از تایپ های زیر برای Props های خودمون استفاده کنیم :
مدیریت خطا در ری اکت یعنی چه ؟ error boundary در ری اکت چیست ؟
به کمک Error Boundary در ری اکت میتونیم خطاهای اپیکیشن رو مدیریت کنیم. یعنی هر زمان خطایی صورت گرفت، بجای کرش کردن اپیکیشن بتونیم یک UI مشخص به کاربر نمایش بدیم ( fallback )
یا مثلا متن “مشکلی پیش آمد” نمایش بدیم.
مرورگر ها میتونن کد های JSX رو بخونن ؟
خیر !
مرورگر ها فقط توانایی خوندن کد های جاوااسکریپتی رو دارن.
درواقع JSX ، جاوااسکریپت نیست.
برای اینکه کدهای JSX برای مرورگر ها قابل درک و خوندن باشن، باید به کمک Babel به جاوااسکریپت تبدیلشون کنیم.
ری اکت در پشت صحنه خودش JSX رو به جاوااسکریپت خام تبدیل میکنه ( به کمک Babel )
از بین سوالات استخدامی ریکت ، این سوال از این بابت ممکنه مطرح بشه تا درک عمیق شمارو نسبت به React بسنجن.
تفاوت کتابخانه ری اکت با انگولار چیه ؟ تفاوت React و Angular چیست ؟
کامپوننت در ری اکت چیست ؟
کامپوننت در ری اکت اجزای سازنده UI ما هست . به هر تیکه کد که یک وظیفه مشخص داره و یک بخش از UI رو نمایش میده کامپوننت میگیم.
کامپوننت ها میتونن reusable ( قابل استفاده مجدد ) باشن.
کامپوننت ها یک بخش مستقل از UI ما هستن. مثلا میتونیم هر کدوم از موارد زیر رو یک کامپوننت در نظر بگیریم :
اینکه هر کامپوننت مستقل هست، کمک میکنه تا فرایند توسعه و دیباگ اون بخش راحت تر باشه چون ارتباطی با سایر بخش ها نداره.
همچنین کامپوننت ها reusable هستن یعنی اگر میخوایم 10 جدول نمایش بدیم، نیازی نیست که کد های مربوط به جدول رو 10 مرتبه ( تکراری ) بنویسیم.
صرفا کافیه یکبار کامپوننت جدول رو بسازیم و 10 بار فراخوانیش کنیم.
این سوال جز پایه ای ترین موارد ری اکت هست و احتمالش وجود داره که حداقل یک سوال مصاحبه ریکت در مورد کامپوننت ها از شما بپرسن.
تفاوت Props و State در ری اکت چیست ؟
کامپوننت والد میتونه مقدار Props کامپوننت فرزندش رو تغییر بده اما مقدار State کامپوننت فرزند رو نمیتونه تغییر بده.
از داخل کامپوننت فرزند میتونیم State رو تغییر بدیم، اما Props رو نمیتونیم تغییر بدیم.
شباهت Props و State در ری اکت چیست ؟
هر دو میتونن از کامپوننت والد مقدار اولیه دریافت کنن.
از داخل کامپوننت فرزند، میتونیم به هر دو مقدار پیشفرض ( default value ) بدیم.
انواع مختلف Side Effect که کامپوننت های ری اکتی میتونن داشته باشن چی هستن ؟
کامپوننت ها در React دو نوع Side Effect میتونن داشته باشن :
ابزار CRA یا همون create-react-app چیست ؟
ابزار CRA یا همون create-react-app یک ابزار CLI هست ( Command line interface ) که برای ایجاد پروژه های ری اکت کاربرد داره.
توسط دستور زیر میشه از این ابزار برای ساخت پروژه react استفاده کرد :
Create-react-app my-app
میشه از AJAX تو پروژه های ری اکتی استفاده کرد ؟
بله براحتی ! ما میتونیم از هر کتابخونه ایجکس مثل axios استفاده کنیم.
اگه اپیکیشن ری اکت ما کند باشه چیکار باید بکنیم ؟
کند بودن اپیکیشن های ری اکتی دلایل زیادی میتونه داشته باشه اما معمولا بخاطر re-render زیادی و غیرضروری هست.
برای جلوگیری از re-render اضافی در ری اکت از 2 ویژگی قوی میشه استفاده کرد :
ویژگی memo به ما کمک میکنه تا از رندر های غیرضروری جلوگیری کنیم. .
درواقع PureComponent تو ری اکت ، از re-render اضافی کامپوننت جلوگیری میکنه. دقت کنید که از این ویژگی فقط تو class Component ها میشه استفاده کرد.
ری اکت روتر چیست ؟ ( React Router چیست ؟ )
ری اکت روتر یک کتابخانه ی استاندارد برای مدیریت Routing ( روتینگ ) در ری اکت هست. کتابخانه React Router به ما امکان جابجایی بین صفحات/کامپوننت های مختلف رو میده.
به کمک این کتابخانه میتونیم url مرورگر رو عوض کنیم و UI مطابق با url رو به کاربر نمایش بدیم ( sync )
تقریبا تو همه ی پروژه های ری اکتی از React Router استفاده میشه، پس احتمال اینکه بین سوالات استخدامی react چند سوال React از React Router ازتون بپرسن وجود داره.
ویژگی BrowserRouter در ری اکت روتر چیست ؟
به کمک BrowserRouter در ری اکت روتر میتونیم یک سیستم روتینگ ( router ) پیاده سازی کنیم. درحقیقت BrowserRouter از history API خود HTML استفاده میکنه ( مثل pushstate , replaceState , postState ) برای اینکه UI نمایش داده شده رو با url مرورگر sync کنه.
کامپوننت Routes در ری اکت روتر چیست ؟
کامپوننت Routes در ری اکت روتر، تو نسخه 6 ری اکت روتر معرفی شد.
در واقع Routes در ریکت یک جایگزین برای Switch محسوب میشه چون بجای اینکه مسیر ها ( route ها ) بر اساس ترتیب انتخاب بشن، بر اساس بهترین تطابق انتخاب میشن.
کامپوننت Route در ری اکت روتر چیست ؟
کامپوننت Route در ری اکت، یک کامپوننت شرطی هست که از ما یک path و یک UI دریافت میکنه. اگه کاربر به اون path مراجعه کنه ( اون path رو در url مرورگر وارد کنه ) UI ما به کاربر نمایش داده میشه.
مثلا ما میخوایم اگ کاربر به آدرس shop رفت ، کامپوننت ShopComponent نمایش داده بشه، این شرط رو کامپوننت Route در ریکت برای ما پیاده سازی میکنه.
کامپوننت Link در ری اکت روتر چیست ؟
اگه با تگ a تو html کار کرده باشین، میدونیم که تگ a برای ریدایرکت کردن کاربر از صفحه ای به صفحه ی دیگه کاربرد داره. تگ Link هم دقیقا همین نقش رو تو React برای ما ایفا میکنه.
به کمک Link در ریکت روتر میتونیم کاربر رو از صفحه ای به صفحه ای دیگه ریدایرکت کنیم.
کامپوننت NavLink در ری اکت روتر چیست ؟
کامپوننت NavLink در ری اکت روتر مشابه کامپوننت Link هست. با این تفاوت که ما از NavLink در ریکت روتر برای ساختن منو هایی استفاده میکنیم که نیاز به لینک دارن.
بطور مثال منوی هدر که شامل لینک صفحات وبلاگ، فروشگاه، تماس با ما و درباره ما میشه.
ما همچنین میتونیم ویژگی active رو تو این کامپوننت مدیریت کنیم. یعنی زمانیکه کاربر روی اون لینک کلیک کرد، چه استایلی به اون دکمه بدیم. ( مثلا رنگش فرق کنه با سایر آیتم ها )
چرا ما به React Router نیاز داریم ؟ دلیل استفاده از ری اکت روتر چیست ؟
ما نیاز به اپیکیشنی داریم که صفحات زیادی داشته باشه ( از دو صفحه تا هزاران صفحه ).
همچنین ما میخوایم بین این صفحات جابجا بشیم ( کاربر رو ریدایرکت کنیم ) این جابجایی بین صفحات باید بصورتی انجام بشه که صفحه reload نشه!
این توقعات ما، صرفا با کتابخانه ری اکت روتر قابل انجام هست.
مهمترین چیزی که باید اینجا به خودمون یادآوری کنیم، این هست که اپیکیشن های ری اکتی، SPA هستن ( single page application ).
کلمه SPA یعنی اپیکیشن تک صفحه ای.
تو اپیکیشن های SPA ما امکان جابجایی بین صفحات رو نداریم، مگر اینکه از کتابخانه های Routing استفاده کنیم.
مزایای ری اکت روتر چیست ؟
تفاوت React Router و React Router DOM چیست ؟
کتابخانه React Router شامل هسته اصلی سیستم روتینگ هست ولی کتابخانه React Router DOM شامل اجرایی هست که تو ارتباط با DOM بهشون نیاز پیدا میکنیم مثل BrowsweRouter ، Link , NavLink و ..
البته که برای استفاده از ری اکت روتر ، باید هم React Router رو نصب کنیم، هم React Router DOM رو.
کم پیش میاد که چنین سوالاتی در بین سوالات مصاحبه ریکت شما وجود داشته باشه، اما اگه ازش مطلع باشید 1 هیچ از بقیه جلو ترید 🙂
چطور در ری اکت، کاربر رو ریدایرکت کنیم ؟
به کمک useNavigate در ریکت میتونیم کاربر رو ریدایرکت کنیم :
const Home = () => { const navigate = useNavigate(); return ( <button ={() => { navigate("/shop"); }} > اگه رو من کلیک کنی، به صفحه فروشگاه میری. </button> ); };
چطور در ری اکت روتر صفحه 404 بسازیم ؟
تو کتابخانه React Router، ما یکسری مسیر ( path ) مشخص میکنیم که درصورت وارد شدن اون path ها در URL مرورگر، یکسری کامپوننت که خودمون مشخص کردیم به کاربر نمایش داده بشه.
حالا اگه یک مسیر ( Path ) در URL مرورگر وارد بشه که اشتباهه، چه اتفاقی باید بیوفته ؟ منطقا باید یک صفحه 404 به کاربر نمایش داده بشه تا متوجه بشه که آدرس رو اشتباه وارد کرده.
<Routes>
<Route path='*' element={<NotFound />} />
<Route path="/" element={<Home />} /> element={<Settings />} /> </Routes>
حالا که تا اینجا سوالارو خوندی .. :)رفیق تا به اینجای کار بخش اول سوالات مصاحبه react رو باهمدیگه مطالعه کردیم اما سرفصل های زیر هنوز موندن :
بخش دوم سوالات مصاحبه ری اکت
بخش سوم سوالات مصاحبه ری اکت
بخش چهارم سوالات مصاحبه ری اکت
برای خودنن مابقی بخش ها روی لینک سوالات مصاحبه ری اکت کلیک کنید تا در فِرانت اِندی مطالعه کنید. دمت گرم که تا اینجا مطالعه کردی و مطمئنم که اگه بقیه سوالات رو هم مطالعه کنی، با یک تسلط خیلی خیلی خوب به مباحث ری اکت، موقعیت شغلی دلخواهتو میگیری :)
