وقتی نوشته هایی که در مورد React هستند را مطالعه می کنید و یا پست های وبلاگ ها را در مورد آموزش React می خوانید بدون شک با واژه اعلانی (declarative) برخورد خواهید کرد. یکی از دلایل قدرتمند بودن React ، اعمال الگوی برنامه نویسی اعلانی است.
بنابراین، برای یادگیری React، باید بدانید که مفهوم برنامه نویسی اعلانی چیست و تفاوت اصلی این نوع برنامه نویسی با برنامه نویسی دستوری (imperative) چه می باشد. در سری مقالات آموزش React به تفاوت این دو اصلاح پر کاربرد پرادخته ایم. همچنین می توانید روش های یادگیری React را مطالعه کنید. با ما همراه باشید. ساده ترین راه برای درک این تفاوت این است که برنامه نویسی دستوری را به عنوان راهی برای توصیف نحوه کارکرد چیزهای مختلف در نظر گرفته و برنامه نویسی اعلانی را به عنوان راهی برای آنچه که شما می خواهید به آن برسید، در نظر بگیرید.
ورود به یک کافی شاپ برای خرید یک لیوان آب پرتقال را می توان مثال واقعی از دنیای دستوری دانست، در این شرایط در حالت عادی، دستورات زیر را به فروشنده می دهید:
- یک لیوان پیدا کن و آن را از قفسه بردار
- لیوان را زیر دستگاه قرار بده
- دسته را بکش تا لیوان پر شود
- لیوان را به من بده
در دنیای اعلانی فقط می گویید " لطفا به من یک آب پرتقال بده"
روش اعلانی فرض را بر این می گذارد که فروشنده از قبل می داند که آب پرتقال را چطور سرو کند، و این یکی از مهم ترین جنبه های کاری برنامه نویسی اعلانی است.
بیایید به سراغ یک مثال جاوااسکریپت برویم. در اینجا یک تابع ساده خواهیم نوشت که آرایه ای از رشته ها با حروف کوچک به آن داده شده، و همان آرایه اما با حروف بزرگ را بر می گرداند:
toUpperCase(['foo', 'bar']) // ['FOO', 'BAR']یک تابع دستوری برای حل این مساله به صورت زیر پیاده سازی می شود:
const toUpperCase = input => {
const output = []
for (let i = 0; i < input.length; i++) {
output.push(input[i].toUpperCase())
}
return output
}در ابتدا یک آرایه خالی برای قرار گرفتن نتیجه در آن، ایجاد می شود. سپس تابع روی تمام المان های آرایه ورودی حرکت کرده و حروف بزرگ را به آرایه خالی منتقل می کند. در نهایت آرایه خروجی بازگردانده می شود.
راه حل اعلانی به صورت زیر خواهد بود:
const toUpperCase = input => input.map(value => value.toUpperCase())آیتم های آرایه ورودی وارد یک تابع نگاشت شده که یک آرایه جدید با حروف بزرگ را برمی گرداند. در اینجا یک تفاوت عمده وجود دارد که باید به آن اشاره کنیم: مثال اول ظرافت کمتری دارد و نیازمند تلاش بیشتر برای فهم است. اما مثال دوم مختصر است و خواندن آن راحت می باشد، که باعث تفاوت بسیار زیاد در مبنای کدنویسی، که در آن نگهداری کد حیاتی است، می شود .
جنبه دیگری که اهمیت پرداختن دارد این است که در یک مثال اعلانی، نیازی به استفاده از متغییرها و به روز رسانی مقادیر آنها در طول اجرای برنامه، نیست. برنامه نویسی اعلانی تمایل دارد که از ایجاد و یا تغییر در وضعیت، اجتناب کند.
به عنوان مثال نهایی، بیایید ببینیم برای React، اعلانی بودن به چه معناست. البته در دوره های React مثال های متنوعی از این مفهوم را ارئه کرده ایم. مساله ای که می خواهیم در اینجا آن را حل کنیم یک کار رایج در توسعه دادن وب است: ایجاد یک دکمه toggle.
یک کامپوننت UI ساده مانند دکمه toggle را تصور کنید. وقتی که روی آن کلیک می کنید، سبز می شود(روشن) در صورتی که قبل از آن خاکستری بوده باشد (خاموش)، و اگر قبلا سبز (روشن) بوده، خاکستری (خاموش) می شود.
روش دستوری انجام این کار به صورت زیر است:
const toggleButton = document.querySelector('#toggle')
toogleButton.addEventListener('click', () => {
if (toggleButton.classList.contains('on')) {
toggleButton.classList.remove('on')
toggleButton.classList.add('off')
} else {
toggleButton.classList.remove('off')
toggleButton.classList.add('on')
}
})این روش دستوری است زیرا، تمام دستورالعمل ها نیاز به تغییر کلاس ها دارند. در مقابل، روش اعلانی استفاده شده در React به شکل زیر خواهد بود:
// To turn on the Toggle
<Toggle on />
// To turn off the toggle
<Toggle />در برنامه نویسی اعلانی ، توسعه دهندگان تنها تشریح می کنند که چه می خواهند انجام شود، و نیازی به لیست کردن تمام گام هایی که برای عملی شدن آن خواسته نیاز است، نمی باشد. در واقع React با پیشنهاد دادن روش اعلانی باعث ساده شدن استفاده اش می شود و در نتیجه کد حاصل از آن نیز ساده است که در نهایت باعث ایجاد باگ های کمتر و دسترس پذیری بیشتر می گردد.
به طور خلاصه، React از یک الگوی اعلانی پیروی می کند، و نیازی نیست که به آن گفته شود تا چگونه با DOM ارتباط برقرار کند؛ شما فقط آنچه را که می خواهید روی صفحه ببینید، توصیف می کنید و React مابقی کارها را برای شما انجام می دهد.
از آنجاییکه ممکن است تا به حال تجربه کرده باشید، بیشتر کتابخانه های UI دیگر برعکس عمل می کنند. آنها مسئولیت آپدیت کردن رابط کاربری را به عهده توسعه دهنده می گذارند، یعنی این شما هستید که باید تمام کارهای مربوط به ایجاد و حذف عناصر DOM را به صورت دستی انجام دهد.
خلاصه اینکه روش برنامه نویسی اعلانی یکی از مفاهیمی است که ری اکت بر مبنای آن پیاده سازی شده است. در سری مقالات آموزش React به مفاهیم مهم دیگری پرادخته شده است که توصیه می کنم حتما مطاله کنید. همچنین برای شروع یادگیری ری اکت می توانید دوره های آموزش React را در وب سایت کلاسبن دنبال کنید.
