درک کامل Two Way Binding

Two-Way-Binding

اکثر دوستانی که React کار می کنند در جلسات ابتدایی به مفهوم جدیدی در برنامه نویسی برخورد می کنند که شاید فهمش یکم در ابتدا دشوار باشه.😬

این قضیه حتی برای کسانی که تجربه ی برنامه نویسی در گذشته رو هم داشتن صادقه و اتفاق افتاده ، پس نگران نباشید.

طبق روال همیشگی عجیب غریب قراره که دوباره این مفهوم رو با یک زبان ساده به همراه یک مثال براتون شرح بدیم.

اصلا این Two Way Binding چیه؟!

خب مثل همیشه به سراغ گوگل ترنسلیت عزیز میریم و میبینم که معنی کرده دو طرفه !

خب تونسته منظور رو برسونه تقریبا 😜

دوستان ، اصطلاح Two Way Binding به معنی انجام یک کار دو طرفه است.

بیایم و تعمیمش بدیم به فعالیت های روزانه تا بیشتر قابل درک باشه برامون. فرض کنید برادر شما به حساب بانکی شما پول میریزه و مقدار موجودی حساب شما رو افزایش میده و همزمان میزان موجودی حساب خودش کاهش پیدا می کنه. حالا اگر شما هم مقداری پول به حساب برادرتون بریزید همزمان میزان موجودی حساب برادرتون رو “تغییر” دادید و این یک عمل دو طرفه است.

همینقدر ساده فعلا به ذهنتون بسپرید تا بریم سراغ ادامه ی مطلب.

یه یادآوری کوچیک از prop ها داشته باشیم 😁 اونجا ذکر کردم که امکان تغییر state توسط component زیر دستی امکان پذیر نیست ( البته داخل پرانتز گفتم که هست و یه پست شیرین می طلبه که این همون پست شیرینه )

توصیه میکنم یه بار دیگه برید و مفهوم Props در React رو بخونید.

اصلا کی گفته باید از Two Way Binding استفاده کنیم؟

عصبانی نشین ! کسی نگفته 🙂 خودتون لازمش دارید و بعد از این پست باهم دیگه رفیق گرمابه و گلستان میشید.

فرض کنید یک component داریم که یه دکمه قراره نمایش بده به این شکل :

و یک Component اصلی داریم که یک Hello چاپ میکنه و نامی که بعد از Hello میاد رو از State جاری سیستم میگیره !

کد این خط بالایی که توضیح دادم میشه این :

خب الان می دونید که ما نمی تونیم به صورت مستقیم از component sayHello وضعیت و یا state جاری سیستم در component App رو تغییر بدیم.

چون sayHello یه component زیر دستی برای App به حساب میاد.

اما فرض کنید ما علاقه داریم وقتی روی دکمه کلیک می کنیم به جای Hello World بنویسه Hello React حالا باید چیکار کنیم؟

در وهله ی اول تابع مد نظرمون رو در App اضافه می کنیم به این شکل زیر که می بینید :

خب حالا این تابع رو به عنوان یکی از prop های sayHello میفرستیم به پایین ( یا همون component زیر دستی خودمون )

نکته پلاس

یه نکته این وسط بگم که خیلی از دوستان اون اوایل شاید فکر کنن onChange یه چیز ثابت هست یا مثلا دنبال این ویژگی ها و attribute ها بگردن ! اما خب باید بهتون بگم که در واقع اصلش on(handler) بوده و شما به جای change هر چیزی می تونید بزارید اما خب اکثر کدنویس ها از همین دامنه لغات محدود استفاده می کنند که DX بالاتری داشته باشه. ( بعدا یه مقاله ی کامل در مورد DX قرار میدم اما فعلا بدونید که منظور خوانایی کد هست. )

خب حالا اگه پست مربوط به prop ها رو خونده باشید و تسلط داشته باشید میدونید که ما onChange رو فرستادیم به sayHello و حالا می تونیم ازش استفاده کنیم.

پس میایم و یک event برای دکمه قرار میدیم در زمانی که کلیک بشه بیاد و نام رو تغییر بده به این صورت :

حالا میایم و setName رو تعریف می کنیم :

خب کار ما تمومه !

الان اگر شما روی دکمه ی مورد نظرمون کلیک کنید میبینید که تبدیل شده به Hello React

این یکی از خاصیت های قشنگ React هست!

قبل از اینکه مراحل اجرای کار رو توضیح بدم و عکس مفهومی پایان کار رو قرار بدیم این رو بگم که خیلی دوست داشتم میتونستم از codepen استفاده کنم و این کد رو live بتونید ببینید منتها متاسفانه مشکلاتی بر سر راه هست که باعث شد نشه !

اما خب من سورس رو براتون قرار میدم و شما کافیه با یک npm install و بعد یک npm start پروژه رو run کنید و خروجی رو تست کنید.

و اما …

چی شد که اینطوری شد؟!

همونطور که می دونین کد ها خط به خط اجرا میشن !

و فایل اصلی برنامه index.js هست که App.js رو فراخوانی می کنه و وقتی به App.js میرسیم میره سراغ render و هنگامی که به SayHello میرسه بررسی می کنه import شده یا نه؟ اگه جواب مثبت بود اون prop های مد نظر رو به SayHello ارسال می کنه که در واقع component زیر دستی ماست.

پس تا اینجا میدونیم که onChange به component زیردستی ارسال میشه 🤓

وقتی در component زیر دستی هنگام اجرای render به Button میرسیم متوجه میشیم که event Handler داریم ! یا همون کنترل کننده ی یه اتفاق ! کنترل یه رخداد !

خب…بلافاصله setName ما اجرا میشه و اینجاست که ما یک نام جدید رو تعریف می کنیم تا پاس بدیم به component بالا دستی و روی عملکرد اون بالا دستی تاثیر بزاریم ( خیلی هیجان انگیزه 😁 )

خب ما در setName گفتیم که:

برای این از this استفاده کردیم چون prop ها به کلاس پاس داده میشن در واقع SayHello نگه دارنده ی prop های ماست.

و prop مورد نظرمون هم onChange هست که قصد داریم تغییراتی توش ایجاد کنیم.

این تغییرات به این شکل هست که یک name رو بهش میدیم تا با خودش ببره به component بالا دستی !

حالا نوبت آپدیت state جاری است !

حالا دوباره برمیگردیم به componenet بالا دستی یا همون App تا اون نامی که تغییر دادیم رو بگیریم و باهاش state جاری سیستم رو آپدیت کنیم و نمایش بدیم.

خب حالا شاید متوجه شده باشید که چرا آرگومان این تابع رو یک n گذاشتیم :

این n همون نامی هست که در setName به onChange پاس دادیم و onChange میده به متد changeName

خب حالا خیلی راحت state رو طی 3 مرحله به روز می کنیم :

مرحله اول : state های جاری سیستم رو کپی می کنیم ( هیچوقت state رو مستقیما تغییر ندید )

مرحله دوم : state کپی شده رو تغییر میدیم

مرحله سوم : state به روز شده رو setState می کنیم.

خب فکر میکنم تونستم تمام کد رو براتون توضیح بدم با یک مثال ساده امیدوارم که لذت برده باشید از دنیای برنامه نویسی 🙃

تنها راه مسلط شدن شما اینه که ابتدا توضیحات رو خوب یاد بگیرید

و بعد برای خودتون یک پروژه تعریف کنید ( از پروژه های ساده به سخت شروع کنید ) و بعد میبینید که خیلی راحت مسلط شدید 😍

اگر این پست براتون مفید بود بدونید که شما هم به دنیای اوپن سورس مدیونید و لازمه که اطلاعاتتون رو به صورت رایگان برای دیگران قرار بدید ❤

2-way-and-1-way-data-binding.jpg
two way data binding

دانلود سورس مینی پروژه

Share:

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

82 − 73 =