زمان تقریبی مطالعه: 5 دقیقه

تاریخ: ۱۴۰۰-۰۳-۰۱
نویسنده: سهیل
7تا از پرکاربرد ترین سوالات مصاحبه React JS

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

امروزه این کتابخانه محبوب جاوا اسکریپت به یکی از بهترین گزینه ها برای صنایع تبدیل شده است تا برنامه frontend خود را بر روی آن بسازند. React روند توسعه را سرعت می بخشد و بسیاری از ویژگیهای این کتابخانه کار توسعه را برای برنامه نویسان آسان کرده است.

اگر کسی هستید که علاقه به ایجاد حرفه خود در React دارید، مطمئناً باید خود را برای راند مصاحبه آماده کنید. در این مقاله، ما در مورد برخی از سوالات مصاحبه ReactJS بحث خواهیم کرد که برای روشن سازی راند مصاحبه مفید خواهد بود.

React .1 چگونه کار می کند؟ Virtual DOM در React چگونه کار می کند؟

React در Virtual DOM کار می کند. وقتی یک حالت در یک مولفه تغییر می کند، الگوریتمی متفاوت را اجرا می کند. این مشخص می کند که چه چیزی در DOM مجازی تغییر کرده است. مرحله بعدی سازگاری است که DOM را با نتیجه متفاوت به روز می کند.

HTML DOM دارای یک شکل ساختار درختی است که توسط ساختار سند HTML مجاز است. درختان DOM به دلیل اندازه برنامه های بزرگ، اندازه بزرگی دارند. امروزه، ما بیشتر به دنبال برنامه های پویا) برنامه های تک صفحه (هستیم، بنابراین لازم است که درخت DOM را دائماً تغییر دهید. این یک عملکرد حقیقی و معضلی در پیشرفت است.

Virtual DOM چکیده ای از HTML DOM است.DOM مجازی سبک است و از جزئیات خاص اجرای مرورگر جدا شده است.Virtual DOM توسط React ساخته نشده است، اما از آن استفاده می کند و آن را به صورت رایگان ارائه می دهد. ReactElement در داخل DOM مجازی زندگی می کند. گره اصلی را در اینجا ایجاد می کند. ReactElement ها به محض تعریف عناصر به DOM واقعی تبدیل می شوند.

به محض تغییر حالت در الگوریتم React diff، آنچه تغییر کرده است را مشخص می کند. سپس DOM با نتیجه diff به روز می شود. DOM مجازی سریعتر از DOM معمولی است.

 JSX .2 چیست؟

JSX مخفف JavaScript XML است. این یک پسوند نحوی JavaScript است و با تمام قدرت جاوا اسکریپت ارائه می شود. JSX  “اجزای React ” را ایجاد می کند. شما نحو JSX را می بینید که در مهاربندهای گره خورده پیچیده شده است. عبارات JSX پس از تلفیق تبدیل به regular JavaScript Object می شوند، به این معنی که در صورت استفاده از دستورات و برای حلقه ها اجازه استفاده از JSX را دارید، آن را به یک متغیر اختصاص دهید، آن را به عنوان آرگومان بپذیرید و از توابع برگردانید.

برای درک نحو JSX در React به مثالی که در زیر آورده شده است نگاه کنید ..

 const element = (
<h1 className="greeting">
Hello World!
</h1>
);

 

معادل آن با استفاده از createElement در زیر آورده شده است:

const element = React.createElement(
'h1',
  {"className":"greeting"},
  'Hello World!'
);

7تا از پرکاربرد ترین سوالات مصاحبه React JS

ReactDOM . 3 چیست و چه تفاوتی بین ReactDOM و React وجود دارد؟

ReactDOM قبلا بخشی از React بود اما بعدا React و ReactDOM به دو کتابخانه مختلف تقسیم شدند. اساساً، ReactDOM مانند چسب بین React و DOM کار می کند. ما می توانیم از آن برای یک چیز استفاده کنیم: نصب با .ReactDOM

ReactDOM.findDOMNode() که یکی دیگر از ویژگی های مفید ReactDOM است می تواند برای دسترسی به عنصر DOM و بقیه چیزهایی در React وجود دارد استفاده شود. React برای تعریف و ایجاد عناصر، قلاب های چرخه عمر و غیره استفاده می شود.

 .4 تفاوت بین یک مولفه Class و یک مولفه Functional در React

در مولفه Class، می توانید از ویژگی های اضافی مانند حالت محلی و قلاب های چرخه عمر استفاده کنید. افزودن موارد بیشتر به آن، برای فعال کردن مولفه خود و دسترسی مستقیم به فروشگاه ما و در نتیجه حفظ وضعیت موثر است.

هنگامی که مولفه فقط غرفه ها را دریافت کرده و آنها را به صفحه ارائه می دهد، این یک “مولفه بدون حالت” نامیده می شود که می توان از عملکرد خالص آن استفاده کرد.

 5- تفاوت بین حالت و لوازم جانبی در React

هنگامی که یک مولفه در برنامه React نصب می شود، ساختار داده حالت با مقدار پیش فرض شروع می شود. در طول زمان، عمدتا نتیجه وقایع کاربر تغییر می یابد. غرفه هایی که مختصر برای ویژپی های خاص هستند، یک پیکربندی مولفه هستند. اصولاً لوازم جانبی مانند قانونی کار می کنند که نحوه ارتباط اجزا با یکدیگر را مشخص می کند. لوازم جانبی تغییرناپذیر هستند و تا آنجا که اجزای سازنده آنها را دریافت می کنند، به آنها مربوط می شود.

یک مولفه نمی تواند لوازم جانبی خود را تغییر دهد، اما وظیفه جمع آوری وسایل فرزند(زیر مجموعه) مولفه خود را دارد. لوازم جانبی لازم نیست که فقط عملکردهای دیتا کال بک ها باشند و ممکن است به عنوان لوازم جانبی منتقل شوند.

همچنین می توانیم وسایل پیش فرض داشته باشیم تا حتی اگر یک مولفه والدین(خود مجموعه) قطعات را پیدا نکنند، لوازم جانبی تنظیم شوند. لوازم و حالت همان کار را انجام می دهند، اما هر دو به روش های مختلفی استفاده می شوند. اکثر مولفه ها بدون حالت خواهند بود. از لوازم جانبی برای انتقال داده ها از والدین به فرزند( از لیدر مجموعه به زیر مجموعه) یا بین خود مولفه ها استفاده می شود.

لوازم جانبی تغییرناپذیر هستند و نمی توان آنها را تغییر داد. برخلاف آن حالت تغییرپذیر است یا داده هایی تغییر خواهند کرد و برای ورودی کاربر مفید است.

.6  مولفه مرتبه بالاتر در React چیست؟

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

اساساً، HOC تابعی است که یک مولفه را می گیرد و یک مولفه جدید را برمی گرداند. HOC به شما امکان استفاده مجدد از کد، منطق و چکیده راه انداز را می دهد. در کتابخانه های شخص ثالث  React، HOC رایج است.

متداول ترین عملکرد اتصال Redux است. به جای اشتراک کتابخانه های ابزار و ترکیب ساده،HOC  بهترین راه برای به اشتراک گذاشتن رفتار بین مولفه های React است. شما می توانید از HOC در refactoring کد استفاده کنید. وقتی بارها و بارها کد مشابه را در مکان های مختلف تکرار می کنید، از HOC قابل استفاده مجدد برای ساخت مجدد کد استفاده کنید.

7تا از پرکاربرد ترین سوالات مصاحبه React JS

7. Redux چیست؟

Redux راهی عالی برای ذخیره کل وضعیت برنامه در یک فروشگاه است. وقتی برنامه شما کوچک است، در اداره امور با مشکلی روبرو نخواهید شد. اما وقتی شروع به رشد می کند، می بینید که حالت در اجزای مختلف غیرقابل کنترل می شود. در اینجا Redux مشکل شما را برطرف می کند.

Redux به طور عمده روی سه مولفه کار می کند:

  • اقدام: اقدامات، محموله های اطلاعاتی هستند که داده ها را از برنامه به فروشگاه می فرستند. اقدامات تنها منبع اطلاعاتی فروشگاه هستند. ما آنها را با استفاده ازstore.dispatch () به فروشگاه می فرستیم.

Reducer :Reducer  • نحوه تغییر وضعیت برنامه ها در پاسخ به اقدامات ارسالی به فروشگاه را مشخص می کند. عملکردها آنچه اتفاق افتاده است را توصیف می کنند، اما نحوه تغییر وضعیت برنامه را توصیف نمی کنند. در واقع، یک Reducer تعیین می کند که چگونه حالت به عمل تبدیل شود.

:Store •  Store Objects ، عملکرد و Reducer را در یک جا جمع می کند. از طریق getState () می توانید به حالت دسترسی پیدا کنید. این اجازه می دهد تا حالت از طریقDispatch  (اقدام )به روز شود.

فروشگاه شامل اشیا جاوا اسکریپت است. با وارد کردن اقدامات برنامه خود می توانید وضعیت را تغییر دهید. پس از آن، می توانید برای این اقدامات Reducer بنویسید و حالت را اصلاح کنید. کل مرحله انتقال در داخل Reducer نگهداری می شود و نباید هیچ اثر جانبی داشته باشد.

در Redux فقط یک منبع قابل اعتماد برای حالت برنامه شما وجود دارد، که می تواند یک حالت UI باشد برای مثال کدام حالت یا حالت داده فعال است مانند جزئیات مشخصات کاربر. این داده ها توسط Redux در محفظه ای که redux آن را فروشگاه می نامد، حفظ می شوند.

توجه داشته باشید که فقط مجاز به ایجاد یک فروشگاه در Redux هستید.

{
  first_name: 'John',
  last_name: 'Doe',
  age: 28
}