توضیح مفصل نحوه استفاده از Link در Hongmeng Next

1. نمای کلی @link

در Hongmeng Next،@Linkدکوراتورها برای ایجاد یک رابطه همگام سازی دو طرفه داده بین اجزای والد و فرزند استفاده می شوند. این بدان معناست که جزء فرزند است@Linkمتغیرهای تزئین شده و منابع داده مربوط به آنها در مؤلفه های والد می توانند داده ها را با یکدیگر همگام کنند. از API نسخه 9 این دکوراتور برای استفاده در کارت های ArkTS و از API نسخه 11 برای استفاده در خدمات متا پشتیبانی می شود.

(1) مکانیسم همگام سازی

1. منبع داده در جزء والد (مانند@State،@StorageLinkو@Link) با اجزای فرعی@Linkاجرای همگام سازی دو طرفه داده بین متغیرهای تزئین شده.
2. تغییرات داده‌های هر دو طرف در زمان واقعی با طرف دیگر همگام‌سازی می‌شوند.

(2) محدودیت ها

@Linkدکوراتورها نمی توانند وارد شوند@Entryدر اجزای سفارشی تزئین شده استفاده می شود.

2. قوانین استفاده از دکوراتورها

1. پارامتر: بدون پارامتر
2. نوع همگام سازی: همگام سازی دو طرفه.
3. انواع متغیر که مجاز به تزئین هستند
   • شی، کلاس، رشته، عدد، بولی، انواع enum و آرایه های آنها.
   • نوع تاریخ پشتیبانی
   • API11 و بالاتر از انواع Map و Set پشتیبانی می کند.
   • از انواع اتحادیه Length، ResourceStr و ResourceColor که توسط چارچوب ArkUI تعریف شده است پشتیبانی می کند.
   • نوع باید مشخص شود و باید همان نوع متغیر حالت محدود دو طرفه باشد. API11 و بالاتر از انواع ترکیبی پشتیبانی نمی شود (مانند رشته | عدد، رشته | تعریف نشده یا ClassA | تهی).
   • هنگام استفاده از undefined و null، توصیه می شود نوع را به صراحت مشخص کنید و از بررسی نوع TypeScript پیروی کنید.
4. مقدار اولیه متغیر تزئین شده: هیچ، مقداردهی اولیه محلی ممنوع است.

3. قوانین انتقال/دسترسی متغیر

1. راه اندازی و به روز رسانی از مولفه والد
   • الزامی است، با جزء اصلی@State،@StorageLinkو@Linkیک اتصال دو طرفه ایجاد کنید.
   • اجازه در مؤلفه والد@State،@Link،@Prop،@Provide،@Consume،@ObjectLink،@StorageLink،@StorageProp،@LocalStorageLinkو@LocalStoragePropزیرمولفه مقداردهی اولیه متغیر تزئین@Link. شروع از API نسخه 9،@Linkمؤلفه فرزند از مؤلفه والد مقداردهی اولیه شد@Stateنحو Comp({ aLink: this.aState }) است و Comp({aLink: $aState}) نیز پشتیبانی می شود.
2. برای مقداردهی اولیه اجزای فرزند استفاده می شود: مجاز است، می تواند برای مقداردهی اولیه متغیرهای منظم استفاده شود،@State،@Link،@Prop،@Provide.
3. اینکه آیا دسترسی خارج از مؤلفه پشتیبانی می شود یا خیر: خصوصی، فقط در مولفه مالک قابل دسترسی است.

4. تغییرات و عملکرد رفتاری را مشاهده کنید

(1) تغییرات را مشاهده کنید

1. انواع پایه (بولی، رشته ای، عددی): تغییرات در مقادیر را می توان به صورت همزمان مشاهده کرد.
2. کلاس یا نوع شی: می توانید تغییرات را در انتساب ها و انتساب های ویژگی مشاهده کنید (یعنی تمام ویژگی های بازگردانده شده توسط Object.keys(observedObject)).
3. نوع آرایه: می توانید تغییراتی را در افزودن، حذف و به روز رسانی سلول های آرایه به آرایه مشاهده کنید.
4. نوع تاریخ: می توانید انتساب کلی Date و عملیات به روز رسانی ویژگی ها را از طریق رابط آن مشاهده کنید.
5. نوع نقشه (API11 و بالاتر): می توانید انتساب کلی نقشه و عملیات به روز رسانی مقدار را از طریق رابط آن مشاهده کنید.
6. نوع تنظیم (API11 و بالاتر): شما می توانید انتساب کل مجموعه و عملیات به روز رسانی مقدار را از طریق رابط آن مشاهده کنید.

(2) رفتار چارچوب

1. رندر اولیه
   • مولفه والد را اجرا کنیدbuild()تابع نمونه جزء فرزند را ایجاد می کند.
   • باید در مولفه والد مشخص شود@Stateمقداردهی اولیه متغیر مولفه های فرعی@Linkمتغیرها، این دو همگام باقی می مانند. جزء والد@Stateکلاس بسته بندی متغیر حالت به زیر مولفه و زیر مولفه منتقل می شود@Linkکلاس wrapper اشاره گر خود را به جزء والد ثبت می کند@Stateمتغیر
2. به روز رسانی منبع داده (مولفه والد به جزء فرزند)
   • جزء والد@Stateپس از تغییر متغیر، تمام اجزای سیستم و متغیرهای وابسته به آن (مانند@Linkنوع بسته بندی).
   • اطلاع دهد@Linkپس از به روز رسانی کلاس بسته بندی، وابستگی های موجود در جزء فرعی@Linkاجزای سیستم متغیرهای حالت نیز برای دستیابی به همگام سازی داده های حالت از مؤلفه های والد به مؤلفه های فرزند به روز می شوند.
3. @Linkبه روز رسانی (جزء فرزند به جزء والد)
   • @Linkپس از به‌روزرسانی، با مؤلفه والد تماس بگیرید@Stateبسته بندیsetروشی برای همگام سازی مقدار به روز شده به مؤلفه والد.
   • جزء فرعی@Linkو جزء والد@Stateبه ترتیب اجزای سیستم وابسته را طی کنید، به‌روزرسانی‌های رابط کاربری مربوطه را انجام دهید و اجزای فرعی را پیاده‌سازی کنید.@Linkهمگام سازی بازگشت به مؤلفه والد@State.

5. نمونه هایی از سناریوهای استفاده

(1) انواع ساده و انواع شی کلاس@Link

جزء والدShufflingContainerدر@Stateمتغیر (نوع سادهyellowButtonPropو کلاس انواع شیgreenButtonState) پاس دادن@Linkبا اجزای فرعیGreenButtonوYellowButtonهمگام سازی دو طرفه را انجام دهید. تغییر داده ها در مؤلفه فرزند با مؤلفه والد و تغییر داده ها در مؤلفه والد نیز با مؤلفه فرزند همگام می شود.

(2) نوع آرایه@Link

جزء والدParentاز@Stateآرایهarrعبور کند@Linkبا اجزای فرعیChildازitemsآرایه ها در هر دو جهت هماهنگ می شوند. اجزای فرعی می توانند عناصر آرایه را اضافه و جایگزین کنند و آنها را با مولفه اصلی همگام کنند. توجه کنید،@Linkو@Stateانواع آرایه ها باید یکسان باشند و نمی توانند باشند@Linkبه عنوان یک نوع عنصر واحد برای دریافت تعریف شده است@Stateآیتم های داده در آرایه (اگر این نیاز را دارید، لطفاً به@Propو@Observed）

(3) تزئین متغیرهای نوع نقشه (API11 و بالاتر)

جزء فرعیChildاز@Linkمتغیرvalue(نوع استMap) با مولفه والدMapSample2از@Stateمتغیرmessageهمگام سازی دو طرفه را انجام دهید. عملیات مختلفی را می توان بر روی Map در مؤلفه فرزند انجام داد (مانند مقداردهی اولیه، تنظیم مقادیر جدید، پاک کردن، جایگزینی و حذف عناصر و غیره)، نمای مطابق با آن به روز می شود و عملیات با مؤلفه والد همگام می شود.

(4) متغیرهای نوع مجموعه تزئینی (API11 و بالاتر)

جزء فرعیChildاز@Linkمتغیرmessage(تایپ کنیدSet) با مولفه والدSetSample1از@Stateمتغیرmessageهمگام سازی دو طرفه را انجام دهید. عملیات مؤلفه فرزند در مجموعه (مانند مقداردهی اولیه، افزودن عناصر، پاک کردن، حذف عناصر و غیره) با مؤلفه والد همگام خواهد شد بر این اساس تازه شده است.

(5) از مکانیسم همگام سازی دو طرفه برای تغییر سایر متغیرهای محلی استفاده کنید

عبور کند@Watchدکوراتور، در جزء فرعیChildوسط@LinkمتغیرsourceNumberهنگامی که تغییر می کند، می توانید محلی را تغییر دهید@StateمتغیرmemberMessage، برای دستیابی به همگام سازی متغیرها بین مؤلفه های والد و فرزند، اما تغییرات محلیmemberMessageبر متغیرها در مؤلفه های والد تأثیر نمی گذارد.

(شش)Linkاز نمونه های نوع اتحادیه پشتیبانی می کند

جزء والدIndexاز@Stateمتغیرname(نوع استstring | undefined) پاس دادن@Linkبا اجزای فرعیChildازnameمتغیرها در هر دو جهت هماهنگ می شوند. تغییر در مؤلفه والد یا فرزندnameویژگی ها یا انواع، طرف مقابل بر این اساس تجدید می شود.

6. مشکلات و راه حل های مشترک

(یک)@Linkخطای نوع متغیر حالت دکوراسیون

در جزء فرعی@Linkمتغیر تزئین شده باید دقیقاً از نوع منبع داده باشد و منبع داده نیز باید باشد@Stateمتغیرهای حالت تزئین شده توسط دکوراتورهای دیگر. به عنوان مثال، اگر منبع داده است@StateتزئینیClassAمتغیر را در زیر مولفه تایپ کنید@Linkنیز باید به عنوان اعلام شودClassAنوع، نه نوع خواص آن.

(2) استفاده کنیدa.b(this.object)تماس فرم باعث بازخوانی UI نمی شود

چه زمانی@Linkمتغیر تزئین شده از نوع Object و in استbuildروش پاس درونa.b(this.object)هنگامی که در یک فرم فراخوانی می‌شود (مانند اصلاح ویژگی‌های Object از طریق روش‌های ثابت یا روش‌های داخلی مؤلفه)، بازخوانی UI نمی‌تواند فعال شود. راه حل این است که ابتدا یک مقدار به متغیر اختصاص دهیم، به طوری که عملیات اصلاح با یک عامل Proxy روی متغیر عمل کند تا به رفرش UI برسد.