React واقعاً چه مشکلی را حل میکند؟
اگر تازه وارد دنیای Frontend شده باشید، احتمالاً شنیدهاید که React یک کتابخانه JavaScript برای ساخت رابط کاربری است. اما سؤال مهمتر این است:
React اصلاً برای حل چه مشکلی ساخته شد؟
قبل از React چه مشکلی داشتیم؟
در پروژههای کوچک، تغییر دادن HTML با JavaScript کار سختی نیست:
document.querySelector("#title").textContent = "Hello";
اما وقتی یک برنامه بزرگتر میشود، وضعیتهای زیادی باید همزمان با UI هماهنگ باشند.
مثلاً در یک فروشگاه اینترنتی، اضافه شدن یک محصول به سبد خرید ممکن است باعث تغییر همزمان این موارد شود:
تعداد سبد خرید
قیمت نهایی
لیست محصولات
دکمههای خرید
اگر بخواهیم همه این تغییرات را دستی با DOM مدیریت کنیم، کد به مرور پیچیده و سخت نگهداری میشود.
React چه رویکردی دارد؟
React به ما اجازه میدهد UI را بر اساس State تعریف کنیم.
مثلاً:
function Cart({ items }) {
return (
<div>
<h2>{items.length} محصول</h2>
{items.map((item) => (
<div key={item.id}>
{item.name} - {item.price}
</div>
))}
</div>
);
}
اینجا به جای اینکه به DOM بگوییم چه چیزی را تغییر بده، مشخص میکنیم:
اگر items این مقدار را داشته باشد، UI باید این شکلی باشد.
وقتی State تغییر میکند، React کمک میکند UI با وضعیت جدید هماهنگ شود.
Imperative در مقابل Declarative
این یکی از مهمترین مفاهیم React است.
در روش Imperative به برنامه میگوییم چطور کاری را انجام دهد:
عنصر را پیدا کن
↓
مقدارش را بخوان
↓
مقدار جدید را قرار بده
اما در روش Declarative بیشتر مشخص میکنیم چه چیزی باید نمایش داده شود:
State
↓
UI
این تغییر طرز فکر، مدیریت رابطهای کاربری پیچیده را سادهتر میکند.
Componentها چه کمکی میکنند؟
React همچنین UI را به Componentهای کوچکتر تقسیم میکند:
RestaurantPage
├── Header
├── Rating
├── Menu
├── Reviews
└── Footer
هر Component میتواند منطق و UI مربوط به خودش را داشته باشد و در قسمتهای مختلف دوباره استفاده شود.
پس React دقیقاً چه مشکلی را حل میکند؟
React قرار نیست تنها راه ساخت سایت باشد و حتی بدون React هم میتوان رابطهای کاربری پیچیده ساخت.
ارزش React بیشتر در این است که یک مدل مشخص برای ساخت و مدیریت UI در اختیارمان میگذارد:
State → UI → User Interaction → State Change → UI
بنابراین اگر بخواهیم در یک جمله بگوییم React چه کاری انجام میدهد:
React کمک میکند رابط کاربری را به شکلی ساختاریافته و قابل پیشبینی، بر اساس وضعیت برنامه مدیریت کنیم.
شاید مهمترین چیزی که هنگام یادگیری React باید یاد بگیریم، نه حفظ کردن useState و useEffect، بلکه همین طرز فکر باشد.