سوالاتی که در مصاحبه یک React developer پرسیده می شود

آیا به دنبال سوالاتی هستید که در مصاحبه استخدام یک React Developer پرسیده می شود؟آیا به دنبال راهنمایی هایی هستید که شما را به عنوان توسعه دهنده React آینده خود را رقم بزنید؟یا ممکن است فقط به دنبال جزئیاتی در مورد React باشید.مثلا (تقاوت بین state و props).در هر صورت شما به جای درستی اومدید.من چند سال پیش در موقعیت شما بودم و همین سوالات در ذهنم بود.چه سوالاتی در مصاحبه های React در انتظار شما است؟دو نوع سوال انتظار می رود که از شما در مصاحبه پرسیده شود.سوالاتی مفهومی و Live coding.سوالات Live coding به این صورت است که از شما میخوان یک الگوریتم رو پیاده سازی کنید یا یک کامپوننت رو بنویسید و از اون استفاده کنید.تنها راهی که برای آمادگی این سوالات وجود دارد اینکه زیاد تمرین کنید و کد بنویسید.اگر شما تا حالا پروژه ای با React ننوشتید.ادامه مقاله رو نخونید و بعد از نوشتن یک پروژه برگردید.خوندن این سبک مقالات جادو نمی کند و شما را برای سوالات Live coding آماده نمی کند تنها راه آمادگی، انجام پروژه است.جایگزینی برای اینکار وجود ندارد.به همین دلیل تمرکز این مقاله بر روی سوالات مفهومی است.این نوع سوالات بر روی اندازه گیری دانشتون در مورد React و توانایی شما برای توضیح آن ها به صورت مختصر و روشن طراحی شده است.این مقاله،بیشتر سوالات محبوب مفهومی در مورد React را پوشش داده است.حتی اگر این سوالات از شما هرگز پرسیذع نشود اما به عنوان یک React Developer کمک می کند تا داتشتون افزایش پیدا کنه و جزئیات بیشتری رو در مورد React بدونید.State vs Propsخب بهتره که از آسان ترین مورد شروع کنیم.اگر به توصیه من عمل کرده باشید و چندین پروژه قبل از خوندن این مقاله انجام داده باشید حتما تفاوت بین این دو تا رو درک کردید ولی اگر قصد داشته باشید به صورت روشن و واضح توضیح بدید،به مشکل بخورید.پراپس ها داده هایی هستند که از طریق والد می آیند در حالی که state ها داده هایی در سطح کامپوننت هستند.یک کامپوننت هرگز خودش props تعریف نمیکنه بلکه از طریق والد این داده بهش میرسه و توسط کامپوننت قابل تغییر نیست.state با هدف ایجاد و تغییر توسط کامپوننت وجود داره و با استفاده از this.setState میتوان مقدار اون رو تغییر داد و بروز کرد.البته در نسخه های بالاتر از 16.8.0 و بعد از معرفی hooks از useState به جای thsi.setState استفاده میشه.در واقع این همون one-way data flowهست.داده ها همیشه از والدین به فرزندان میرسه.Redux یک داستان کاملا متفاوت داره که بهش خواهیم پرداخت.توضیح Redux در پنج دقیقهاین یک سوال مصاحبه عالی هست که از خود من پرسیده شده بود.این سوال باعث میشه تا شما خیلی از مفاهیم رو درک کنید و یاد بگیرید.زمانی که شما Redux رو توضیح میدید در واقع دارید مشکلی که Redux قصد داره اون رو حل کنه و روش حل رو توضیح میدید.انتقال، اشتراک گزاری و تغییر داده در تمامی کامپوننت ها باعث شلوغی و بهم ریختگی می شود.Redux اینکار رو با جداسازی لایه data از بقیه کدها آسانتر میکنه.حالا وقتشه که در مورد مفهوم هسته Redux یعنی store, actionsو reducers صحبت کنیم.Storeجایی هست که تمامی داده ها نگه داری می شود.store یک اتصال راحت برای تعامل با state های global در اپلیکیشن فراهم می کند.برای دریافت این object در هر زمانی کافی است store.getState() رو فراخوانی کنیم.Actionsکارهایی که قرار است ما با Store انجام بدیم.هر زمانی که ما یخوایم قسمتی از state رو تغییر بدیم، این فرآیند با یک Action انجام میشه.اکشن فقط یک JSON objects است که به فرم زیر است:const action = {type: SOME_TYPE, ...properties}زمانی که ما بخواهیم یک action اجر شود، ما action رو dispatch می کنیم:store.dispatch(action);Reducersیک reducer یک تابع در Redux است که action را مدیریت می کند و تصمیم میگیرد چگونه store باید بروزرسانی شود.این فرآیند اولین اصول کلیدی Redux رو یاد میده:هرگز state رو تغییر نده.Reducers همیشه state ایی که در حال حاضر وجود داره رو میگیره و یک action روش انجام میده و یک state جدید رو بر میگردونهاین ممکنه که در ابتدا یکم عجیب و غریب به نظر برسه و چیزی هست که بسیاری از مردم اشتباه میکنند اما شما باید در مصاحبه به این سوال پاسخ بدید.در مثال پایین می تونید یک مثال از reducer رو ببینیدfunction counter(state = 0, action) { switch (action.type){ case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; // in case an action is unknown or should not modify state }}اگر شما بتونید در 5 دقیقه Redux رو به صورت روشن و مختصر توضیح بدید،نصف راه مصاحبه رو به خوبی تموم کردید.همچنین میتونید ازطریق بصری سازی کار Redux مشابه عکس زیر این فرآیند رو کوتاه تر کنید.https://i2.wp.com/programmingwithmosh.com/wp-content/uploads/2018/09/redux_explained.png?ssl=1Class Component vs Functional Componentاگر مدتی است که با React کار می کنید حتما با class و functional components آشنا هستید.به class component زیر نگاه کنید:class Hello extends Component{ render(){ return <div>Hello {this.props.name}</div> } }در قطعه کد زیر همون کامپوننت با Function نوشته شده است:function Hello(props){ return <div>Hello {props.name}</div> }در مقاله هر چیزی که نیاز دارید در مورد Functional و class Component در React بدونید در این مورد به صورت کامل صحبت شده.پیشنهاد میکنم این مقاله رو بخونید و دیگه من اینجا در این مورد صحبت نمی کنم. https://reactapp.ir/react-functional-components/ زمانی که شما setState رو فراخوانی می کنید چه اتفاقی می افتد؟تنها زمانی که شما می توانید به صورت مستقیم this.stateرو بنویسید در constructor یک کامپوننت است.هر جای دیگه ای شما فقط می تونید از this.setState برای تغییر state استفاده کنید..زمانی که شما setState رو فراخوانی می کنید، یک مقدار به این method پاس میدید و سعی میکنه که این مقدار پاس شده رو با state قبلی ترکیب کنه و state به روز بشه.با بروز شدن state در واقع UI به روز رسانی میشه و نتیجه رو کاربر معمولا میبینه.در React کامپوننتی که this.setState رو فراخوانی کرده و همچنین تمام فرزندانش نیاز دارند تا با بروزرسانی state تغییر و re-render بشند.یکی از استثنائات این است که کامپوننت componentShouldUpdate رو پیاده سازی کرده باشد که false برگردونه و با این پیاده سازی باعث میشه که کامپوننت با this.setState دیگه re-renderer نشود.شما ممکن است نیاز داشته باشید اطلاعات بیشنری در مورد this.setStateداشته باشید.مثلا گاهی اوقات asynchronous است و گاهی اوقات نیست.گاهی اوقات ممکن است شما بخواهید یک callback function به this.setState. پاس بدید.البته این سوالات معمولا خارج از محدوده سوالاتی است که در یک مصاحبه معقول پرسیده می شود.ولی شما می تونید از اینجا و اینجا اطلاعات بیشتری در این مورد کسب کنید.DOM در مقابل Virtual DOMبه عقیده من این یکی از سخت ترین قسمت ها برای توضیح دادن و فهمیدن است.شما می تونید تعداد زیادی پروژه با React نوشته باشید بدون اینکه در مورد Virtual DOM چیز خاصی فهمیده باشید.اما به این معنی نیست که این مبحث مهم نیست چون شما چندین پروژه نوشتید.بهترین توسعه دهنده های React که من میشناسم مفاهیم اساسی و اصلی React رو به صورت کامل درک کردند و میدونند نه اینکه فقط کار با API ها رو بدونند.درک اینکه چه چیزی در پشت React است شما رو در اشکال زدایی و نحوه استفاده از این کتابخونه کمک میکنه.DOMبرای صحبت در مورد virtual DOM در React ما باید ابتدا DOM رو درک کنیم.DOM مخفف Document Object Model است.شاید در نگاه اول گیج کننده به نظر برسد اما این یک نام fancy برای نحوه نمایش HTML در حافظه است.یک رابط برای تعامل توابع جاوا اسکریپت با گره ها مثل getElementById ایجاد می کند.اما تغییر ایجاد کردن در DOM پرهزینه است.هر باری که ما بخواهیم یک element رو تغییر بدیم باید کل ساختار درخت رو برای یافتن elemet طی کنیم.با توجه به افزایش اندازه و پیچیدگی نشانه گذاری های HTML، هر بار که ما DOM رو تغییر میدیم باید کل این درخت بزرگ رو طی کنیم که باعث کاهش عملکرد و سرعت می شود.Virtual DOMیک کپی از DOM است که native برای React است.همانطور که قبلا دیدیم با this.setState شما حداقل تعداد re-render برای کامپوننت ها و فرزندانشون رو می تونید تصور کنید این تغییرات فقط بخاط بروزشدن state رخ می دهد.بعد از بروزرسانی های مورد نیاز کامپوننت ها در virtual DOM، یک مقایسه با DOM انجام می شود و تغییرات مورد نیاز روی DOM اعمال می شود.این کار باعث می شود تا تمام ساختار درخت طی نشود و فقط گره هایی که مورد نیاز است بروز شود.یکی از دلایلی که باعث سرعت بالای React در لود شدن صفحات virtual DOM است.اگر این مقاله براتون مفید بوده و باعث شده تا در مصاحبه یک شغل موفق باشید با بقیه به اشتراک بزاریدش.همچنین اگر سوالات دیگه ای از شما در مصاحبه پرسیده شده در کامنت ها بیانش کنید تا همگی استفاده کنیم. همچنین اگر قصد یادگیری react رو به صورت تخصصی و حرفه ای دارید، پیشنهاد می کنم آموزش جامع و پروژه محور react (ری اکت ) رو مشاهده کنید