1. DOM مجازی چیست و React چگونه از آن برای بهبود عملکرد استفاده میکند؟
DOM مجازی (VDOM) یک نمایش سبک و در حافظه از DOM واقعی است. React از آن برای بهینهسازی بهروزرسانیها و رندر استفاده میکند.
وقتی state یا props تغییر میکند:
- React یک VDOM جدید رندر میکند.
- VDOM جدید را با نسخه قبلی مقایسه میکند (با استفاده از الگوریتم مقایسه).
- حداقل مجموعه تغییرات (پچها) را محاسبه میکند.
- سپس DOM واقعی را بهصورت دستهای بهطور مؤثر بهروزرسانی میکند.
این کار دستکاری مستقیم DOM که پرهزینه است را کاهش میدهد و عملکرد را بهبود میبخشد.
2. تفاوت بین کامپوننتهای تابعی و کامپوننتهای کلاسی در React را توضیح دهید.
| جنبه |
کامپوننت کلاسی |
کامپوننت تابعی |
| سینتکس |
کلاسهای ES6 |
توابع ساده JS |
| وضعیت (State) |
this.state |
هوک useState |
| چرخه حیات |
componentDidMount و غیره |
useEffect |
زمینه this |
ضروری |
استفاده نمیشود |
3. هوکهای React چیست؟ useState، useEffect و useContext را با مثال توضیح دهید.
هوکها به کامپوننتهای تابعی اجازه میدهند وضعیت، اثرات جانبی و زمینه را مدیریت کنند — ویژگیهایی که قبلاً فقط در کامپوننتهای کلاسی در دسترس بودند.
useState: وضعیت محلی را مدیریت میکند.useEffect: اثرات جانبی (مثل دریافت داده، اشتراکها) را مدیریت میکند.useContext: به مقادیر زمینه دسترسی میدهد.
4. React چگونه روشهای چرخه حیات کامپوننت را در کامپوننتهای تابعی مدیریت میکند؟
کامپوننتهای تابعی از هوکها برای شبیهسازی رفتار چرخه حیات استفاده میکنند:
| چرخه حیات کلاسی |
معادل هوک |
componentDidMount |
useEffect(..., []) |
componentDidUpdate |
useEffect(..., [deps]) |
componentWillUnmount |
return () => {} داخل useEffect |
5. اهمیت کلیدها (keys) در لیستهای React چیست و اگر بهدرستی استفاده نشوند چه اتفاقی میافتد؟
کلیدها به React کمک میکنند تا تشخیص دهد کدام آیتمها در یک لیست تغییر کرده، اضافه یا حذف شدهاند. کلیدها باید یکتا و پایدار باشند.
اگر از اندیسها بهعنوان کلید استفاده کنید یا آنها را حذف کنید:
- React ممکن است کامپوننتها را بهاشتباه بازاستفاده کند.
- میتواند باعث اشکالات رندر یا عملکرد ضعیف شود.
6. تفاوتهای کلیدی بین React.js و Vue.js از نظر معماری کامپوننت و واکنشپذیری چیست؟
| ویژگی |
React |
Vue |
| زبان |
JSX + JS |
قالبهای HTML + JS |
| واکنشپذیری |
وضعیت غیرقابل تغییر، بهروزرسانی دستی |
رفرنسها و پروکسیهای واکنشی |
| مدل کامپوننت |
اولویت با توابع با هوکها |
API گزینهها / API ترکیب |
| اتصال داده |
یکطرفه |
دوطرفه با v-model |
| مدیریت وضعیت |
Context، Redux، Zustand |
Vuex، Pinia |
React بدون پیشفرض است (آزادی و انعطافپذیری)، در حالی که Vue تجربه توسعهدهندهای کاملتر ارائه میدهد.
7. چگونه تصمیم میگیرید که برای یک پروژه جدید از React.js یا Vue.js استفاده کنید؟ چه عواملی در انتخاب شما تأثیر میگذارند؟
عوامل:
- تجربه تیم (React در شرکتهای بزرگ رایجتر است).
- نیازهای اکوسیستم (مثل Next.js در مقابل Nuxt).
- پیچیدگی پروژه (سادگی Vue برای برنامههای کوچک تا متوسط مناسب است).
- ترجیح ابزارها (React: انعطافپذیر، Vue: یکپارچهتر).
- پشتیبانی جامعه و بازار کار (React پذیرش گستردهتری دارد).
قانون کلی:
- برای رابطهای کاربری بزرگمقیاس، بلندمدت و قابل سفارشیسازی → React.
- برای برنامههای سریعالوصول یا تیمهایی با دانش JS کمتر → Vue.
8. چگونه یک برنامه قدیمی React را از کامپوننتهای کلاسی به کامپوننتهای تابعی با هوکها مهاجرت میکنید؟
رویکرد گامبهگام:
- با کامپوننتهای ایزوله و کمریسک شروع کنید.
state را با useState جایگزین کنید.- روشهای چرخه حیات را با
useEffect جایگزین کنید.
- اتصالات را با حذف
this مدیریت کنید.
- مصرفکنندگان زمینه را با
useContext مهاجرت کنید.
9. کامپوننتهای سطح بالاتر (HOCs) چیست؟ مثالی از زمانی که از یکی استفاده کردهاید ارائه دهید.
HOC یک تابع است که یک کامپوننت را میگیرد و کامپوننت جدیدی با رفتار بهبودیافته بازمیگرداند. این یک الگو برای استفاده مجدد از کد است.
مورد استفاده:
من از HOCها برای موارد زیر استفاده کردهام:
- تزریق منطق سراسری (مثل لاگگیری، مرزهای خطا).
- افزودن بررسیهای احراز هویت به مسیرها.
- اتصال کامپوننتها به Redux (مثل
connect()).
10. چگونه ترکیب پیچیده کامپوننتها را در React.js یا Vue.js مدیریت میکنید تا از کد تنگاتنگ جلوگیری کنید؟
استراتژیها:
- استفاده از کامپوننتهای ترکیبی برای زمینه مشترک و رفتار شبهاسلات.
- اعمال رندر پراپها یا هوکهای سفارشی برای استفاده مجدد از منطق.
- جداسازی رابط کاربری و منطق (الگوی کامپوننت هوشمند/خام).
- جلوگیری از prop drilling با زمینه یا provide/inject در Vue.
11. تطبیقپذیری (Reconciliation) در React چیست و چگونه در پشت صحنه کار میکند؟
تطبیقپذیری فرآیندی است که React برای بهروزرسانی DOM هنگام تغییر وضعیت یا پراپهای یک کامپوننت استفاده میکند.
مراحل:
- تغییر وضعیت یک درخت VDOM جدید را ایجاد میکند.
- React آن را با درخت قبلی با استفاده از الگوریتم هیوریستیک (O(n)) مقایسه میکند.
- تغییرات حداقل را شناسایی کرده و DOM واقعی را بهروزرسانی میکند.
بهینهسازیهای کلیدی:
- استفاده از کلیدها برای تشخیص تغییرات لیست.
- فرض میکند کامپوننتهای با نوع یکسان خروجی مشابهی تولید میکنند.
- استفاده از معماری Fiber برای رندر غیرهمزمان و اولویتبندی.
این باعث میشود بهروزرسانیها قابل پیشبینی و با عملکرد بالا باشند، بهویژه در رابطهای کاربری بزرگ.