مفهوم State در برنامه‌نویسی چیست؟

اگر با برنامه‌نویسی آشنا باشید (چه در حوزه‌ی وب، چه سیستم‌عامل و غیره) با عبارت state روبرو شده‌اید اما state در برنامه نویسی چیست؟ قبل از اینکه بخواهیم به مفهوم state در برنامه نویسی بپردازیم باید با خود کلمه‌ی state در زبان انگلیسی آشنا شویم. state به معنی «وضعیت» است. مثلا وضعیت من در حال حاضر نوشتن یک مقاله است، وضعیت شما ممکن است خواندن مقاله باشد، وضعیت فرد دیگر استراحت کردن باشد و الی‌آخر. مثلا اگر state کسی «نوشیدن قهوه» باشد می‌توانیم state های مختلفی را برایش متصور شویم؛ به‌طور مثال وضعیت او «باز کردن دهان» باشد یا «مزه کردن قهوه» باشد یا «بالا آوردن فنجان» باشد. در این مثال شما دائما در state های مختلف هستید، «نوشیدن قهوه»  وضعیت کلی شما است درحالی‌که «بالا آوردن فنجان» یا «باز کردن دهان» وضعیت‌های جزئی‌تری هستند.

برنامه‌نویسی نیز دقیقا به همین شکل است. به‌طور مثال در یک وب‌سایت ممکن است یک modal باز شده باشد که از کاربر بخواهد وارد حسابش شود. در این حالت می‌توان گفت وضعیت کلی برنامه‌ی ما احراز هویت است. درعین‌حال می‌توانیم این state را شکسته و به قسمت‌های کوچک‌تری تقسیم کنیم. به‌طور مثال وضعیت modal در این مثال چیست؟ این modal می‌تواند وضعیت «باز» یا «بسته» را داشته باشد. فرم ورود به‌ حساب کاربری نیز state خودش را دارد؛ فرم «خالی» یا «پُر» است.

بر اساس چیزی که گفتم کد React.js زیر باید مفهوم پیدا کند:

import { useState } from 'react';




function Dashboard() {

  const [authModalIsOpen, setAuthModalIsOpen] = useState(false);




  // ... قسمت های دیگر کد ...




  return authModalIsOpen ? <AuthModal /> : <MainPage />

}

کد بالا useState (از hook های react) را وارد اسکریپت کرده و از آن برای ثبت state در این کامپوننت استفاده می‌کند. authModalIsOpen در این مثال متغیری است که می‌تواند true یا false باشد. با انجام این کار به react گفته‌ایم که در زمان تغییر این متغیر (تغییر state) باید این قسمت از کد را دوباره بررسی کرده و تغییرات احتمالی را ایجاد کند. البته این فقط یک مثال برای افرادی بود که با react آشنایی دارند درصورتی‌که مبحث state هیچ اختصاصی به react.js ندارد. از هر زبان برنامه‌نویسی و از هر فریم ورکی که استفاده کنید با مفهوم state سروکار خواهید داشت. زمانی که state های جزئی مانند باز بودن یا نبودن modal و خالی بودن یا نبودن فرم را باهم ترکیب می‌کند، state کلی برنامه را به دست می‌آورید.

با این حساب می‌توان به زبان ساده بگوییم که state داده‌های برنامه‌ی ما در یک‌لحظه‌ی خاص هستند!

اگر بخواهم state را با کدهای جاوا اسکریپت ساده به شما نشان بدهم می‌توانیم چنین کدی را تعریف کنیم:

let counter = 0;




function increment() {

  counter = counter + 1;

  renderState();

}




function renderState() {

  console.log(counter);

}




setInterval(function () {

  increment();

}, 1000);

کد بالا متغیری به نام counter را تعریف کرده و در ابتدا آن را برابر صفر قرار می‌دهد. ما می‌توانیم state این متغیر را به‌صورت جداگانه در نظر بگیریم و بگوییم state این متغیر در شروع برنامه صفر است (همان‌طور که گفتم state داده‌های شما در یک‌لحظه‌ی خاص هستند). در مرحله‌ی بعدی متدی به نام increment را داریم که یک واحد به counter اضافه می‌کند و سپس متد renderState را صدا می‌زند. متد renderState نیز فقط مقدار counter را در کنسول چاپ می‌کند. در مرحله‌ی آخر برای فعال کردن این دو متد از تابع setInterval استفاده کرده‌ایم تا هر ۱ ثانیه (۱۰۰۰ میلی‌ثانیه) تابع increment دوباره اجرا شود. اگر بگذاریم این کد تا ۱۰ ثانیه اجرا شود چنین نتیجه‌ای را می‌گیریم:

0

1

2

3

4

5

6

7

8

9

10

هرکدام از اعداد بالا یک state هستند چراکه در هر ثانیه‌ی خاص counter یک مقدار خاص را داشته است بنابراین می‌توان گفت که state این برنامه هر ۱ ثانیه تغییر می‌کند. توجه داشته باشید که حتی اگر چیزی را در کنسول چاپ نکنیم بازهم state ما تغییر کرده است چراکه مقدار متغیر counter تغییر کرده است. نکته‌ی مهم اینجاست که تغییر state لزوما دیدنی نیست و در بسیاری از اوقات در پس‌زمینه اتفاق می‌افتد.

البته در نظر داشته باشید که state را می‌توانیم به دو قسمت internal (داخلی) و external (خارجی) نیز تقسیم کنیم. گرچه این تقسیم‌بندی شایع نیست اما می‌تواند به درک بهتر شما از state کمک کند. تصور کنید یک وب‌سایت کامل را نوشته‌ایم؛ این وب‌سایت از دو قسمت front-end و back-end تشکیل‌شده است. ما با استفاده از جاوا اسکریپت قسمت front-end را نوشته‌ایم و state خاصی را برای آن داریم اما قسمت back-end چطور؟ قسمت back-end نیز با زبانی مانند جاوا اسکریپت یا PHP یا پایتون و امثال آن نوشته‌شده است و state خودش را دارد. اگر بخواهیم front-end را اصل در نظر بگیریم و فقط روی آن تمرکز کنیم، داده‌هایی که از سمت سرور می‌آیند (مانند وضعیت login بودن یا نبودن ما) نوعی state خارج از برنامه هستند بنابراین به آن state خارجی یا external می‌گوییم. بازهم می‌گویم که این نوع تقسیم‌بندی اصلا رایج و شناخته‌شده نیست اما به درک بهتر شما از state کمک می‌کند.

امیدوارم مثال‌هایی که در طول مقاله ذکر کردم به درک مفهوم state در برنامه نویسی کمک کرده باشد.

منبع: وب‌سایت‌های futurice و academind