آیا ری‌اکت از Two-way Binding پشتیبانی می‌کنه؟

درود دوستان! اگه با فریم‌ورک‌هایی مثل انگولار یا ویو کار کرده باشین می‌دونین که این فریم‌ورک‌ها دارای قابلیتی به اسم Two-way binding هستن. اما ری‌اکت از این قابلیت پشتیبانی نمی‌کنه و به قول معروف One-way binding داره. توی این پست می‌خوایم ابتدا بررسی کنیم که Two-way binding چیه و چگونه اون رو توی ری‌اکت پیاده‌سازی کنیم. این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست که شامل مجموعه‌ای از پست‌های کوتاه و کاربردی ری‌اکتی میشه.

 

Two-way binding؟! 😳

شاید اگه مقدار کمی هم با ری‌اکت کار کرده باشین، بدون اینکه اسم این ویژگی رو شنیده باشین اون رو خودتون پیاده‌سازی کردین. Two-way binding یک مفهوم توی دنیای توسعهٔ نرم‌افزار هست که میگه وقتی اطلاعات یک صفحه رو از طریق UI برنامه تغییر می‌دیم، این تغییرات می‌بایست به صورت خودکار استیت برنامه رو هم بروزرسانی کنه، و بلعکس. یعنی یک ارتباط دو طرفه بین مدل (یا به بیان ساده‌تر همون استیت) و UI برنامه وجود داره.

توی ری‌اکت این ارتباط دو طرفه نیست. وقتی Model (همون استیت) تغییر می‌کنه، این تغییر توی UI دیده میشه. اما وقتی UI تغییر کنه ما باید استیت رو به‌صورت دستی بروز کنیم. ساده‌ترین مثال برای این قضیه، زمانی هست که یک <input> داریم:

function Input() {
  const [value, setValue] = useState('');

  const onChange = (e) => {
    setValue(e.target.value);
  }

  return (
    <input value={value} onChange={onChange} />
  );

توی کد بالا وقتی مقدار استیت value تغییر می‌کنه، این تغییر به صورت خودکار توی UI دیده میشه. اما وقتی مقدار <input> از توی UI (به قول معروف از قسمت View) تغییر می‌کنه، این تغییر توی استیت رخ نمی‌ده، مگر اینکه خودمون به صورت دستی این کار رو انجام بدیم. به همین دلیله که تابع خط ۴ تا ۶ رو نوشتیم و اون رو به پراپرتی onChange ورودی نسبت داریم. به نوع این ارتباط بین Model و View می‌گیم One-way binding.

 

خب دوستان امیدوارم از مطالبی که بررسی کردیم استفاده کرده باشین. تا یه قسمت دیگه روزتون خوش 😉🌹