در این مقاله تمام سعی و تلاش خود را میکنیم تا جامع ترین لیست سوالات استخدامی react را برای شما دانشجویان جویای کار قرار دهیم.
خیلی از شما دوستان مباحث را آموخته اید و حتی توانایی کد زدن هم دارید، اما حلقه مفقوده شما، اصطلاحات زیاد و بعضا سخت جاوا اسکریپت و ری اکت میباشد. مخصوصا آنجایی که برای مصاحبه وقت دارید و استرس شدید را تحمل میکنید!
در نظر داشته باشید عموما در مصاحبه ها یکسری سوالات از مفاهیم REACT پرسیده میشود و بعد یک قسمت LIVE TRAINING . به این معنا که هرچقدر هم مفاهیم را خوب بلد باشید، باید توانایی حل مسئله را داشته باشید!
به همین دلیل این مقاله جامع ترین لیست سوالات استخدامی react میتواند کمک شایان توجهی به شما کند. آن را خوانده و برای دوستانتان نیز ارسال نمایید.
خوب…بریم سراغ سوالات…♥
ری اکت یک کتابخانه متن باز یا open source جاوا اسکریپتی است که برای ایجاد رابط کاربری (user interface) به ویژه برای وب اپلیکیشن های تک صفحه ای (SPA: Single-Page-Application) بکار می رود.
در واقع از کتابخانه ری اکت برای مدیریت و کنترل لایه View در وب اپلیکیشن ها و برنامه های موبایل استفاده می شود. ReactJS توسط آقای Jordan Walke در شرکت فیسبوک راه اندازی و توسعه داده شد و در ماه May سال 2013 اولین نسخه ری اکت به بازار وب عرضه شد .
پاسخ منفیست و میتوان با افزودن پکیج های REACT ROUTR و یا NEXT.js سایت های چند صفحه ای هم ساخت.
DOM مخفف Document Object Model است. این یک نام fancy به معنای تفننی و خیالی ، برای نحوه نمایش HTML در حافظه است. مدل های مختلف و متفاوتی برای دسترسی به عناصر در اچ تی ام ال دارد. مانند getElementById و…
با توجه به افزایش اندازه و پیچیدگی نشانه گذاری های HTML، هر بار که ما DOM را تغییر میدهیم باید کل این درخت بزرگ را طی کنیم که باعث کاهش عملکرد و سرعت می شود.
Virtual DOM
virtual DOM یک نمونه از همان DOM است که native(محلی – بومی – فرزند – جزو و…) برای React است.
همانطور که میدانید با setState شما حداقل تعداد re-render برای کامپوننت ها و فرزندانشون رو می تونید تصور کنید. این تغییرات فقط بخاط بروزشدن state رخ می دهد.
بعد از بروزرسانی های مورد نیاز کامپوننت ها در virtual DOM، یک مقایسه با DOM انجام می شود و تغییرات مورد نیاز روی DOM اعمال می شود.
این کار باعث می شود تا تمام ساختار درخت طی نشود و فقط گره هایی که مورد نیاز است بروز شود.یکی از دلایلی که باعث سرعت بالای React در لود شدن صفحات است، virtual DOM میباشد.
همین ابتدا بگوییم shadow DOM ربطی به ری اکت ندارد، ولی بخاطر شباهت با virtual DOM در اینجا آورده شده است تا تفاوت آنها را خوب بدانید!
shadow DOM یه تکنولوژی مرورگره که در ابتدا برای تعیین متغیرها و ایزولهسازی css دروب کامپوننت(Web component) طراحی شده بود.
Shadow DOM یک ویژگی CSS است که به توسعه دهندگان اجازه می دهد تا یک درخت DOM جداگانه ایجاد کنند که از درخت DOM اصلی جدا است. این درخت DOM جداگانه به عنوان Shadow DOM شناخته می شود.
Shadow DOM مزایای زیادی برای توسعه دهندگان دارد، از جمله:
برای ایجاد یک Shadow DOM، باید از ویژگی ::shadow
استفاده کنید. ویژگی ::shadow
به شما امکان می دهد یک درخت DOM جداگانه برای یک عنصر ایجاد کنید.
This is a paragraph
در این مثال، ما از ویژگی ::shadow
برای ایجاد یک Shadow DOM برای عنصر #my-element
استفاده می کنیم. درخت DOM Shadow شامل یک عنصر h1
با رنگ قرمز است.
می توانید از ویژگی ::shadow
برای افزودن سبک ها، ویژگی ها و رویدادهای سفارشی به عناصر Shadow DOM استفاده کنید.
برای دسترسی به عناصر Shadow DOM، می توانید از ویژگی shadowRoot
استفاده کنید. ویژگی shadowRoot
یک شی DOM است که درخت DOM Shadow را برای یک عنصر بازمی گرداند.
This is a paragraph
در این مثال، ما از ویژگی shadowRoot
برای دسترسی به درخت DOM Shadow برای عنصر #my-element
استفاده می کنیم. سپس از querySelector()
برای انتخاب عنصر h1
در درخت DOM Shadow استفاده می کنیم.
Shadow DOM یک ویژگی قدرتمند است که می تواند به توسعه دهندگان کمک کند تا کنترل بیشتری بر ظاهر و رفتار عناصر داشته باشند.
آیا میدانید مدرسه پرنیان، کلاس آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟
Props ها داده هایی هستند که از طریق والد می آیند و میتوانند دیتا را بین کامپوننت ها منتقل نمایند.
در حالی که state ها داده هایی در سطح کامپوننت هستند (اگر از کلاس استفاده میکنید، در حالت کلی همراه متد SUPER میتوانید سطح دسترسی داده را در کل کامپوننت آزاد کنید)
هوکهای useCallback و useMemo برای بهبود عملکرد کامپوننتها مورد استفاده قرار میگیرند.
کاربرد هوک useCallback در React این است که در هر render از ایجاد مجدد توابعی که در بدنه کامپوننت تعریف شدهاند، جلوگیری کند. این کار میتواند منجر به مشکلات عملکرد غیرضروری شود، به خصوص برای توابع callback که به کامپوننتهای child نیز منتقل میشوند.
از طرف دیگر useMemo فرایندهایی که پردازشهای سنگین دارند را به خاطر میسپارد.
Memoization یک اصطلاح فنی برای توابعی است که اگر آرگومانهایشان تغییر نکرده باشد، میتوانند مقادیر گذشته را که محاسبه کردهاند “به خاطر بیاورند”. در این صورت، تابع مقدار “یادآوری شده” را برمیگرداند.
به عبارت دیگر، ممکن است محاسباتی در برنامه خود داشته باشیم که مقدار قابل توجهی از منابع محاسباتی را مصرف میکنند و بخواهیم که تا حد امکان این محاسبات کم انجام شوند. در این صورت، از هوک useMemo استفاده میکنیم که با هوک useCallback تفاوت دارد زیرا یک مقدار برمیگرداند، نه یک تابع.
هم useMemo و هم useCallback یک تابع و یک آرایه از وابستگیها را میپذیرند. اساسا تنها تفاوت بین این هوکها این است که یکی نوع مقدار را در حافظه نگه میدارد و دیگری تابع را در حافظه ذخیره میکند.
Foo is just food without D
} export default Appپورتال ها یک راه درجه یک برای تبدیل childبه یک گره DOM ارائه می دهند که خارج از سلسله مراتب DOM جزء والد وجود دارد.
در ری اکت، پورتال یک روش برای رندر کردن فرزندان یک کامپوننت در یک گره DOM جداگانه است. این بدان معناست که فرزندان پورتال از سلسله مراتب DOM کامپوننت والد جدا هستند.
ReactDOM.createPortal(child, container)
مثال :
This is some content
در این مثال، ما از پورتال برای نمایش یک modal در بالای صفحه استفاده می کنیم. modal فقط زمانی قابل مشاهده است که دکمه “Open” کلیک شود.
همانطور که مشاهده می کنید، modal از سلسله مراتب DOM کامپوننت والد جدا است. این بدان معناست که modal توسط سایر کامپوننت ها در صفحه پنهان نمی شود.
پورتال ها یک ویژگی قدرتمند هستند که می توانند برای طیف وسیعی از کاربردها در ری اکت استفاده شوند.
مهمترین آپدیت را میتوان نسخه 16.8 و بالاتر دانست، زیرا مفهوم هوک های REACT به آن اضافه شد و دیگر توانستیم با کد کمتر، تمیز تر ، آسان تر و قابل فهم تر از function ها بجای class استفاده کرده و از تمامی امکانات آن بهره مند شویم.
در ری اکت، کامپوننت های کنترل شده و کنترل نشده دو نوع کامپوننت هستند که برای مدیریت داده های فرم استفاده می شوند.
کامپوننت های کنترل شده
در یک کامپوننت کنترل شده، داده های فرم توسط کامپوننت ری اکت مدیریت می شوند. این بدان معناست که کامپوننت ری اکت مسئول دریافت تغییرات داده ها از کاربر و اعمال آن تغییرات است.
برای ایجاد یک کامپوننت کنترل شده، از ویژگی value
یا defaultValue
در عناصر ورودی استفاده می کنید. ویژگی value
مقدار فعلی داده های فرم را ذخیره می کند، در حالی که ویژگی defaultValue
مقدار پیش فرض داده های فرم را ذخیره می کند.
در اینجا یک مثال ساده از یک کامپوننت کنترل شده آورده شده است:
Your name is: {name}
در این مثال، ما از ویژگی value
برای ذخیره مقدار فعلی نام کاربر استفاده می کنیم. سپس از یک متد رویداد onChange
برای دریافت تغییرات داده ها از کاربر استفاده می کنیم.
کامپوننت های کنترل نشده
در یک کامپوننت کنترل نشده، داده های فرم توسط DOM مدیریت می شوند. این بدان معناست که کامپوننت ری اکت مسئولیت دریافت تغییرات داده ها از کاربر را ندارد.
برای ایجاد یک کامپوننت کنترل نشده، از ویژگی ref
در عناصر ورودی استفاده می کنید. ویژگی ref
یک شی DOM را به شما می دهد که می توانید از آن برای دسترسی به عنصر ورودی در DOM استفاده کنید.
در اینجا یک مثال ساده از یک کامپوننت کنترل نشده آورده شده است:
Your name is: {inputRef.current.value}
در این مثال، ما از ویژگی ref
برای ذخیره یک شی DOM برای عنصر ورودی استفاده می کنیم. سپس از شی DOM برای دسترسی به مقدار فعلی نام کاربر استفاده می کنیم.
تفاوت اصلی بین کامپوننت های کنترل شده و کنترل نشده در این است که در یک کامپوننت کنترل شده، کامپوننت ری اکت مسئولیت دریافت تغییرات داده ها از کاربر را دارد، در حالی که در یک کامپوننت کنترل نشده، DOM مسئولیت دریافت تغییرات داده ها از کاربر را دارد.
کامپوننت های کنترل شده مزایای زیر را دارند:
کامپوننت های کنترل نشده مزایای زیر را دارند:
انتخاب نوع کامپوننت برای استفاده به نیازهای خاص شما بستگی دارد. اگر به کنترل بیشتری بر داده های فرم نیاز دارید، باید از یک کامپوننت کنترل شده استفاده کنید. اگر به سادگی نیاز به ایجاد یک فرم دارید، می توانید از یک کامپوننت کنترل نشده استفاده کنید.
از Virtual-DOM بجای Real-DOM استفاده می کند. به این دلیل که دستکاری و تغییر DOM اصلی سنگین و هزینه بر است.
از رندر سمت سرور (SSR: Server-Side-Rendering) پشتیبانی می کند ولی بصورت دیفالت CSR هست.
در عملیات اتصال داده (Data-Binding) بصورت یک طرفه (Unidirectional) کار می کند.
از کامپوننت های قابل استفاده مجدد (reusable/composable) برای توسعه UI اپلیکیشن استفاده می کند.
عملیات اتصال داده در ری اکت به فرآیندی گفته میشود که دادهها را از یک منبع داده خارجی به یک کامپوننت ری اکت منتقل میکند. این عملیات میتواند به صورت دستی یا خودکار انجام شود.
اتصال داده دستی
در اتصال داده دستی، توسعهدهنده کد را برای دریافت دادهها از منبع داده خارجی و انتقال آن به کامپوننت ری اکت مینویسد. این کار معمولاً با استفاده از APIهای منبع داده خارجی انجام میشود.
در اینجا یک مثال ساده از اتصال داده دستی آورده شده است:
در این مثال، ما از یک API HTTP برای دریافت دادههای کاربران از یک سرور خارجی استفاده میکنیم. سپس دادهها را به کامپوننت ری اکت منتقل میکنیم و آن را در یک آرایه ذخیره میکنیم.
اتصال داده خودکار
در اتصال داده خودکار، ری اکت به طور خودکار دادهها را از منبع داده خارجی به کامپوننت ری اکت منتقل میکند. این کار معمولاً با استفاده از کتابخانههای اتصال داده مانند react-query
یا urql
انجام میشود.
در اینجا یک مثال ساده از اتصال داده خودکار آورده شده است:
در این مثال، ما از کتابخانه react-query
برای اتصال دادههای کاربران از یک سرور خارجی استفاده میکنیم. react-query
به طور خودکار دادهها را از سرور دریافت میکند و آن را در یک آرایه ذخیره میکند.
مزایا و معایب عملیات اتصال داده
عملیات اتصال داده مزایای زیر را دارد:
عملیات اتصال داده معایب زیر را نیز دارد:
نتیجهگیری
عملیات اتصال داده یک ابزار قدرتمند است که میتواند به توسعهدهندگان ری اکت کمک کند تا دادهها را از منابع داده خارجی به کامپوننتهای ری اکت منتقل کنند. انتخاب نوع عملیات اتصال داده به نیازهای خاص توسعهدهنده بستگی دارد.
بیایید با تعریف «رندر» شروع کنیم. رندر فرآیند بازیابی یک صفحه وب، راه اندازی کد، و ارزیابی ساختار و طراحی یک صفحه است. رندرینگ می تواند به روش های مختلفی رخ دهد: سمت کلاینت، سمت سرور و پویا.
رندر سمت سرور یا همان SSR فرآیند رندر کردن صفحات وب شما از طریق سرور های سایت شما است. در رندر سمت مشتری (CSR)، این فرآیند از طریق مرورگر کاربر تکمیل می شود. همچنین فرآیند رندر پویا از طریق یک سرور شخص ثالث انجام می شود.
دو نسخه از صفحه وب شما با SSR وجود دارد که شما را مجاب می کند بدانید SSR چیست و چه مشکلاتی به همراه دارد: HTML اولیه و HTML ارائه شده، معروف به DOM (مدل شی مستقیم).
گوگل فقط می تواند به HTML ارائه شده دسترسی داشته باشد. این بدان معناست که برای دریافت “اعتبار” از موتور جستجو بسیار مهم است که عناصر و محتواهای کلیدی ارائه شوند.
رندر سمت سرور به معنای تولید HTML برای یک صفحه وب در سمت سرور است.
بوسیله فریم ورک نکست جی اس (NextJS) می توان رندر شدن اپلیکیشن ری اکت را در سمت سرور (SSR) پیاده سازی کرد.
ساختاری است شبیه XML که در اکما اسکریپت (ECMAscript) بکار می رود. JSX امکان نوشتن کدهای html در بین کدهای جاوا اسکریپت و در تابع React.createElement را برای توسعه دهندگان فراهم می کند.
پیشنهاد میکنیم مقاله مفهوم و قواعد jsx در javascript را در وبلاگ پرنیان حتما مطالعه فرمایید
لینک مقاله
میشه گفت هیچ لزومی به اینکار نیست و از ورژن 16.8 ریاکت به بعد و با اضافه شدن هوکها به فانکشن کامپوننتها، شما میتوانید از state یا lifecycle methodها یا تمامی فیچرهایی که قبلا فقط در کلاس کامپوننت ها قابل استفاده بود، در فانکشن کامپوننتهاتون استفاده کنید.
البته امروزه برنامه نویسان بیشتر از فانکشن کامپوننت برای کد نویسی استفاده میکنند.
از دلایل این کار که در سایت ری اکت نوشته شده است میتوان به موارد زیر اشاره کرد:
Component
و PureComponent
دو کلاس پایه هستند که میتوان از آنها برای ایجاد کامپوننتهای ری اکت استفاده کرد. انتخاب کلاس مناسب برای کامپوننت به نیازهای خاص شما بستگی دارد. اگر میخواهید عملکرد را بهبود ببخشید، باید از PureComponent
استفاده کنید. اگر میخواهید اطمینان حاصل کنید که کامپوننت در هر بار تغییر state یا props مجدداً رندر میشود، باید از Component
استفاده کنید.
مثال :
خوب میدانید که اگر با فانکشن بنویسیم میشود Functional و اگر با کلاس بنویسیم میشود Class.
این نکته را هم میدانید که با افزودن هوک ها، دیگر ویژگی های مشترکی دارند.
اما مهمترین ویژگی خروجی آنهاست. یک کد یکسان را در دو خروجی نشان میدهیم. خودتان قضاوت کنید.
DEV – function component:
DEV – class component:
یک المنت یک آبجکت ساده (plain object) است که بیانگر چیزی است که قرار است بعنوان یک گره (node) در DOM نمایش یابد.(مانند تگ h1)
در حالیکه یک Component می تواند به روش های مختلفی تعریف شود. می تواند یک class ، function با متد render باشد.
اگه یه بار تلاش کنید که مستقیما state را آپدیت کنید متوجه میشوید که کامپوننت شما مجددا render نمیشود.
به جای اینکه مستقیما state را آپدیت کنیم باید از متد setState در Class Component و از useState در Function Components استفاده کنیم.
این متدها یک آپدیت در شی state را برنامه ریزی و مدیریت میکنند و وقتی تغییر انجام شد ، کامپوننت شما re-render خواهد شد.
تابع callback درون setState زمانی صدا زده می شود که مقدار state تغییر کرده باشد و کامپوننت re-render شده باشد. از آنجائیکه متد setState بصورت ناهمگام یا asynchronous اجرا می شود، تابع کال بک می تواند در تمام اکشن های post صدا زده شود.
setState({ name: ‘John’ }, () => console.log(‘changed!’))
در مرحله اول شما باید بدانید مدیریت کننده پکیج ها یا Package Manager چیست. در حین کار با فریم ورک های جاوا اسکریپتی به کتابخانه ها و رفرنس های زیادی نیاز می باشد که اگر پروژه شما قدری بزرگ باشد مدیریت و نصب این پکیج ها بسیار سخت خواهد شد.
پکیج منیجر ها روشی را ارائه می کنند که توسط آنها مدیریت پکیج ها اتوماسیونی می شود یا به عبارتی عملیات خودکارسازی پروسه ی نصب، به روز رسانی، پیکربندی و حذف قطعات نرم افزاری (پکیج ها) از یک رجیستری همگانی به سادگی در پروژه شما انجام می پذیرد.
برخی از محبوبترین مدیریتکنندگان پکیج عبارتند از:
مدیریت کننده پکیج یک ابزار ضروری برای توسعهدهندگان نرمافزار است. این ابزار به توسعهدهندگان کمک میکند تا نرمافزار را سریعتر و کارآمدتر توسعه دهند.
مدیریت کننده پکیج کاربردهای مختلفی دارد، از جمله:
npm یا node package manager مدیریت کننده پکیج های nodejs به صورت پیش فرض می باشد. چون همانطوری که می دانید برای کار با React.js باید حتما نود جی اس روی سیستم شما نصب باشد.
کار کردن با npm به صورت Command-line یا خط فرمان می باشد و از طریق آن به هزاران پکیج مختلف دسترسی دارید. بعد از نصب nodejs نرم افزار مدیریت کننده پکیج یا همان npm هم به صورت خودکار نصب می شود.
npm کاستی هایی داشت که شرکت فیس بوک تلاش کرد این کاستی ها را برطرف سازد. به همین جهت فیس بوک yarn را ارائه داد.
در واقع yarn جایگزین یا رقیب npm نیست بلکه یک installer می باشد که در کنار npm هست و از همان ساختار npm و رجیستری استفاده می کند.
npm و yarn در عمل تفاوت خاصی ندارند و yarn سریعتر هم هست.
نصب yarn:
npm install yarn –global
SyntheticEvent یک wrapper در اطراف رویدادهای نیتیو مرورگر است. در واقع API آنها مشترک است. مانند رویدادهای stopPropagation و preventDefault.
در ری اکت، رویدادهای synthetic رویدادهایی هستند که توسط ری اکت ساخته میشوند. این رویدادها بر رویدادهای DOM اصلی مانند click
، change
، و submit
سوار میشوند.
رویدادهای synthetic مزایای مختلفی نسبت به رویدادهای DOM اصلی دارند، از جمله:
برای استفاده از رویدادهای synthetic، از ویژگی on
در کامپوننتهای ری اکت استفاده میشود.
در اینجا یک مثال ساده از استفاده از رویداد synthetic آورده شده است:
Count: {count}
در این مثال، ما از یک دکمه برای افزایش شمارنده استفاده میکنیم. رویداد onClick
کامپوننت بر رویداد click
سوار میشود.
اگر این مثال را با استفاده از react-dom
اجرا کنید، خواهید دید که شمارنده هر بار که دکمه کلیک شود، افزایش مییابد.
تفاوت بین رویدادهای synthetic و رویدادهای DOM اصلی
تفاوت اصلی بین رویدادهای synthetic و رویدادهای DOM اصلی در این است که رویدادهای synthetic توسط ری اکت ساخته میشوند، در حالی که رویدادهای DOM اصلی توسط مرورگر ایجاد میشوند.
رویدادهای synthetic مزایای مختلفی نسبت به رویدادهای DOM اصلی دارند، اما معایبی نیز دارند. یکی از معایب رویدادهای synthetic این است که آنها کمی کندتر از رویدادهای DOM اصلی هستند.
رویدادهای synthetic یک ابزار قدرتمند هستند که میتوانند به توسعهدهندگان ری اکت کمک کنند تا کد خود را سازگارتر، قابل تکرارپذیری و قابل تستتر کنند.
وقتی در ری اکت می خواهیم یک لیستی از آیتم ها تعریف کنیم، باید حتما اتریبیوت key را نیز برای آنها بیاوریم. در واقع این key به ری اکت می گوید کدام آیتم تغییر پیدا کرده یا حذف و یا اضافه شده. معمولا با عنوان id آن را می شناسیم.
بایستی حتما به اتریبیوت style ورودی آبجکت باشد.
Hello World !!!
در ری اکت، forward ref یک ویژگی است که به شما امکان میدهد یک ref را به فرزند کامپوننت خود منتقل کنید. این کار میتواند برای دسترسی به عنصر DOM فرزند از داخل کامپوننت والد استفاده شود.
برای استفاده از forward ref، از تابع forwardRef()
استفاده میشود. تابع forwardRef()
یک کامپوننت را به عنوان آرگومان میگیرد و یک ref را به عنوان مقدار برمیگرداند.
در اینجا یک مثال ساده از استفاده از forward ref آورده شده است:
در این مثال، ما از یک کامپوننت MyComponent
استفاده میکنیم که از یک ref برای نگهداری از عنصر DOM فرزند خود استفاده میکند. ما از ویژگی ref
در کامپوننت App
برای انتقال ref به کامپوننت MyComponent
استفاده میکنیم.
اگر این مثال را با استفاده از react-dom
اجرا کنید، خواهید دید که کامپوننت MyComponent
به عنصر DOM فرزند خود دسترسی دارد.
مزایای استفاده از forward ref
استفاده از forward ref مزایای مختلفی دارد، از جمله:
معایب استفاده از forward ref
استفاده از forward ref معایبی نیز دارد، از جمله:
forward ref یک ابزار قدرتمند است که میتواند به توسعهدهندگان ری اکت کمک کند تا کد خود را سادهتر، قابل تکرارپذیری و قابل تستتر کنند.
مدیریت رویدادها (Handling Events) در المنتهای ریاکت بسیار شبیه به مدیریت رویدادها در المنتهای DOM است. بعضی تفاوتهای نحوی وجود دارد:
رویدادهای ریاکت به جای حروف کوچک از نامگذاری camelCase استفاده میکنند.
با JSX، به جای یک رشته متنی یک تابع به عنوان event handler پاس میدهید.
تفاوت دیگر این است که برای جلوگیری از رفتار پیش فرض در React، نمی توانید false را برگردانید. شما باید صراحتا preventDefault را فراخوانی کنید. به عنوان مثال ، با HTML ساده ، برای جلوگیری از رفتار پیشفرض ارسال فرم، می توانید بنویسید:
در یک حلقه، این که بخواهیم یک پارامتر اضافه به یک event handler پاس بدهیم رایج است. برای مثال، اگر id
، شناسه سطر باشد، هر دو کد زیر کار خواهند کرد:
button onClick={(e) => this.deleteRow(id, e)}>Delete Row
button onClick={this.deleteRow.bind(this, id)}>Delete Row
رندر کردن شرطی در ریاکت همانطور کار میکند که شرطها در جاوااسکریپت کار میکنند. از عملگرهای جاوااسکریپت مانند if یا عملگر شرطی (conditional operator) برای ساختن المنتهایی که نمایانگر state کنونی هستند، استفاده کنید و بگذارید ریاکت UI را بهروز رسانی کند تا با آنها منطبق شود.
(همان مثال لاگین و لاگ اوت با پراپس در کلاس☻)
در ری اکت، lifting state up یا انتقال state به بالا به فرآیندی گفته میشود که در آن state از کامپوننتهای فرزند به کامپوننتهای والد منتقل میشود. این کار میتواند برای بهبود عملکرد و قابلیت تکرارپذیری کد استفاده شود.
چرا باید state را به بالا منتقل کنیم؟
state را میتوان در کامپوننتهای فرزند ذخیره کرد. با این حال، این کار میتواند منجر به مشکلاتی از جمله:
چگونه state را به بالا منتقل کنیم؟
برای انتقال state به بالا، میتوان از ویژگی props
در کامپوننتهای والد استفاده کرد.
در اینجا یک مثال ساده از انتقال state به بالا آورده شده است:
در این مثال، ما از یک کامپوننت App
استفاده میکنیم که state را مدیریت میکند. ما از ویژگی props
در کامپوننت Child
برای انتقال state به کامپوننت Child
استفاده میکنیم.
اگر این مثال را با استفاده از react-dom
اجرا کنید، خواهید دید که کامپوننت Child
فقط زمانی رندر میشود که state تغییر کند.
مزایای انتقال state به بالا
انتقال state به بالا مزایای مختلفی دارد، از جمله:
معایب انتقال state به بالا
انتقال state به بالا معایبی نیز دارد، از جمله:
انتقال state به بالا یک تکنیک قدرتمند است که میتواند به توسعهدهندگان ری اکت کمک کند تا کد خود را کارآمدتر و قابل تکرارپذیریتر کنند. با این حال، مهم است که از مزایا و معایب این تکنیک آگاه باشید تا بتوانید از آن به طور موثر استفاده کنید.
فایلهای بیشتر برنامههای ریاکت با کمک ابزارهایی مانند Webpack، Rollup یا Browserify بستهبندی (bundle) میشود.
فرآیند بسته بندی کردن فایلها به پیدا کردن فایلهای ایمپورت شده و قرار دادن محتوای همه آنها در یک فایل “بسته” گفته میشود. میتوان این بسته را در یک صفحه وب بارگذاری کرد که تمام برنامه یکجا بارگذاری شود.
یک الگوی رایج در React این است که یک کامپوننت چندین عنصر را برمی گرداند. قطعات به شما امکان می دهند لیستی از فرزندان را بدون اضافه کردن گره های اضافی به DOM گروه بندی کنید.
یک higher-order component (HOC) در ری اکت یک تابع است که یک کامپوننت دیگر را می گیرد و یک کامپوننت جدید را برمی گرداند. HOC ها یک روش قدرتمند برای استفاده مجدد از منطق کامپوننت در ری اکت هستند.
HOC ها به خودی خود بخشی از API ری اکت نیستند، بلکه یک الگوی کد هستند که از ماهیت ترکیبی ری اکت پدید آمده است.
در اینجا یک مثال ساده از یک HOC آورده شده است:
در این مثال، HOC withClass یک کامپوننت جدید را برمی گرداند که یک کلاس CSS به آن اضافه شده است. کامپوننت ساده MyComponent با HOC تزئین می شود و خروجی یک div با کلاس CSS “my-class” است.
مفهوم context در ری اکت این امکان را برای توسعه دهنده گان فراهم می کند تا بدون نیاز به ارسال داده های موردنظر به شکل props به تمام سطوح کامپوننت ها، آنها را در کامپونت های دلخواه خود استفاده کنند.
Context در ری اکت یک API است که به شما امکان می دهد داده ها را بین کامپوننت ها بدون نیاز به استفاده از props منتقل کنید. Context برای به اشتراک گذاری داده هایی که برای بسیاری از کامپوننت ها در یک برنامه مشترک است، ایده آل است.
برای استفاده از Context، ابتدا باید یک context ایجاد کنید. یک context یک شیء است که مقدار داده را ذخیره می کند. برای ایجاد یک context، از تابع React.createContext() استفاده می کنید.
در این مثال، کامپوننت MyComponent از تابع Context.Consumer برای دسترسی به داده context ThemeContext استفاده می کند. این بدان معناست که خروجی کامپوننت MyComponent همیشه مقدار داده context ThemeContext را نشان می دهد.
children یک props است که امکان ارسال یک کامپوننت را به شکل props به کامپوننت دیگر فراهم می کند.
هر چیزی که در بین تگ باز و بسته کامپوننت قرار بگیرد، بعنوان فرزند یا children آن کامپوننت محسوب می شود و می توان آن را به صورت props در یک کامپوننت دیگر مورد استفاده قرار داد.
در صورتی که یک کامپوننت نیاز به state داشته باشد، به اصطلاح به آن stateful component گفته می شود.
تا قبل از ورژن 16.8 ریکت، امکان تعریف state فقط در کلاس کامپوننت ها فراهم بود. اما از این نسخه به بعد، با استفاده از هوک ها در ریکت، این امکان مهیا شد که در فانکشن کامپوننت ها نیز از state استفاده شود.
دستور کامندلاین create-react-app به توسعه دهندگان این امکان را می دهد که بدون هیچگونه کانفیگ خاصی، یک اپلیکیشن ری اکت را ایجاد کرده و اجرا کنند.
در ری اکت، اگر می خواهید کامپوننت موردنظر خود را در JSX رندر کنید، باید حرف اول نام کامپوننت بصورت Capital یا UpperCase باشد.
در غیر اینصورت، ری اکت قبل از اجرای برنامه، ارور می دهد و اجازه تعریف این کامپوننت را نخواهد داد. دلیل این روش نام گذاری اینست که تنها المان های HTML و تگ های SVG می توانند در ری اکت با حروف کوچک تعریف شوند.
وقتی از کلاس های ES6 برای تعریف کامپوننت استفاده می کنید باید در متد constructor آبجکت state را مقداردهی اولیه (initialize) کنید.
اما وقتی از متد React.createClass برای ایجاد کامپوننت استفاده می کنید باید از متد getInitialState برای مقداردهی اولیه state استفاده کنید.
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = { /* initial state */ }
}
}
const MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ }
}
})
useState
همان state در کلاس های ری اکت میباشد.
این هوک کاری را شبیه lifeCycle های کلاس ها در ری اکت انجام میدهد.
شبیه componentdidMount , componentdidUpdate , ComponentWillUnMount
همانطور که میبینید دو آرگومان میپذیرد و دومی اختیاریست:
در نظر داشته باشید کد های داخل این هوک onLoad میباشد و دایما تکرار میشود. ما همیشه باید پارامتر دوم را که یک آرایه را می پذیرد، وارد کنیم. ما می توانیم به صورت اختیاری وابستگی ها را به useEffect در این آرایه ارسال کنیم.
با کد زیر فقط یکبار تکرار میشود :
همچنین میتواند این وابستگی ها مقادیری باشداز جنس پراپ و استیت و متغیر، با تغییر آنها مجدد فراخوانی مشود:
useLayoutEffect می تواند به عملکرد آسیب برساند. در صورت امکان useEffect را ترجیح دهید.
useLayoutEffect نسخه ای از useEffect است که قبل از شکل گیری مجدد صفحه نمایش توسط مرورگر فعال می شود.
useTransition یک React Hook است که به شما امکان میدهد وضعیت را بدون مسدود کردن رابط کاربری بهروزرسانی کنید.
useImperativeHandle
چیست؟useImperativeHandle مقدار نمونه ای را که هنگام استفاده از ref در معرض مؤلفه های والد قرار می گیرد، سفارشی می کند. مثل همیشه، در بیشتر موارد باید از کدهای ضروری با استفاده از ref ها اجتناب شود. useImperativeHandle باید با forwardRef استفاده شود.
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return ;
}
FancyInput = forwardRef(FancyInput);
useDebugValue
چه کار میکند؟برای دیباگ کردم هوک های دستی استفاده میشود.
useDebugValue یک Hook داخلی ساده است که اطلاعات بیشتری در مورد منطق داخلی یک Hook سفارشی در React DevTools ارائه می دهد. این به شما امکان می دهد اطلاعات مفید و اضافی را در کنار هوک های سفارشی خود با قالب بندی اختیاری نمایش دهید.
useDeferredValue
چه کار میکند؟به شما اجازه میدهد که آپدیت بخشی از ui خود را به تعویق بیندازید.
constdeferredValue = useDeferredValue(value)
useDeferredValue یک مقدار را میپذیرد و یک کپی جدید از مقدار را برمیگرداند که به ، بروزرسانیهای فوریتر موکول میشود. اگر رندر فعلی نتیجه یک بهروزرسانی فوری باشد، مانند ورودی کاربر، React مقدار قبلی را برمیگرداند و پس از تکمیل رندر فوری، مقدار جدید را ارائه میکند.
useId
به چه معناست؟useId قلابی برای تولید شناسههای منحصربهفرد است که در سرور و کلاینت پایدار هستند، در حالی که از عدم تطابق هیدراتاسیون جلوگیری میکنند.
میدانید که معمولا دیتا ها را در کامپوننت سطح بالا و پرنت ذخیره کرده و سپس توسط propها بین کامپوننت ها پاسکاری میکنند که به “prop drilling” مشهور است.
اما سینتکس جدیدتر (هوک) و حرفه ای تر بدون پاسکاری پراپس در کامپوننت ها ، کانتکس نام دارد. مانند مثال زیر:
useReducer
UseReducer Hook مشابه useState Hook است. این امکان را برای منطق استیت (state) سفارشی فراهم می کند.
useReducer Hook دو آرگومان را می پذیرد.
useReducer بازمیگرداند وضعیت فعلی یک state و dispatch
متد را. مثال:
هوک ها، فانکشن های قابل استفاده مجدد هستند.
وقتی یک منطق در قالب یک کامپوننت دارید که باید توسط چندین مؤلفه استفاده شود، میتوانیم آن را به یک Hook سفارشی تبدیل کنیم. این هوک های همیشه با کلمه use شروع میشوند.
مانند توابع، کدی که قرار است چندین مرتبه تکرار شود را با آرگومان ورودی داینامیک در داخل هوک دستی قرار دهید.
برای فهم بیشتر موضوع مثال Fetch را در نظر بگیرید.
همیشه بصورت دستی و داخل کد این کار را انجام میدادیم. اما این دفعه بایستی ابتدا یک صفحه جدا بسازیم مانند useFetch.js و کد عملیات FETCH را با ورودی داینامیک داخل آن قرار دهیم مانند کد زیر:
همانطور که در کد بالا میبینید، url حکم همان ورودی داینامیک ما را دارد. پس با هر آدرسی که در جای آن قرار گیرد ، کار یکسانی را انجام خواهد داد.
در صفحه اصلی آن را باید ایمپورت کرد، مقدار داد و روی خروجی عملیات مناسب را انجام داد.مانند کد زیر در صفحه index.js:
{item.title}
; })} > ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Profiler> به شما امکان می دهد عملکرد رندر درخت React را به صورت برنامه ریزی شده اندازه گیری کنید.
<Suspense> به شما امکان می دهد تا زمانی که بارگیری فرزندان آن به پایان برسد، یک بک آپ نمایش دهید.
cloneElement به شما امکان می دهد یک عنصر React جدید با استفاده از عنصر دیگری به عنوان نقطه شروع ایجاد کنید.
isValidElement بررسی می کند که آیا یک مقدار عنصر React است یا خیر.
و این داستان همچنان ادامه دارد و نمیتوان گفت که به تمام موارد اشاره کردیم. شما هم میتوانید در قسمت نظرات این پست با ما را در تکمیل این مقاله جامع ترین لیست سوالات استخدامی react همیاری کنید.
در انتها پیشنهاد میکنیم کتاب خوب جناب آقای جعفررضایی که در همین باب نوشته شده است را مطالعه فرمایید.
سلام
مقاله خیلی خوب و جامعی هستش .
ممنونم از زحمات شما
سلام. خواهش میکنم
بسیار مقاله مفیدی بود استاد.
خداروشکر