تکامل Arkts و مدیریت دولت Arkui: از V1 تا V2

پس از یک دوره توسعه ، Arkts و Arkui فراتر از مرحله قرض گرفتن نقاط قوت از سایر چارچوب ها حرکت کرده اند. آنها اکنون در حال تحول سبک های متمایز خود و طی کردن مسیرهای منحصر به فرد هستند. یکی از مهمترین سیستم ها در زمان اجرا Arkui –مدیریت دولت، که داده ها و تعامل صفحه را کنترل می کند – به طور طبیعی از V1 به V2 ارتقاء یافته است. برای ادامه کار با آخرین روندها ، من یک پروژه جدید را به طور کامل با استفاده از مدیریت V2 State ساخته شده ام. در زیر مختصراً از ویژگی هایی که تاکنون استفاده کرده ام و مشکلات موجود در آن مشاهده شده است.

تفاوت بین مدیریت دولت V1 و V2

مدیریت دولت V1: الگوی مشاهده پروکسی

مکانیسم اصلی: هنگام ایجاد یک متغیر حالت ، یک ناظر پروکسی به طور همزمان ایجاد می شود. این ناظر فقط می تواند تغییرات را در سطح پروکسی تشخیص دهد.

محدودیت های استفاده:

• متغیرهای حالت کاملاً با UI همراه هستند و نمی توانند به طور مستقل وجود داشته باشند.
• هنگامی که چندین نمایش داده های مشابه را ارائه می دهد ، تغییرات ایجاد شده در یک دیدگاه دیگران را به روزرسانی نمی کند.
• مشاهده کم عمق است-فقط تغییرات دارایی سطح اول تشخیص داده می شود. مشاهده عمیق و گوش دادن پشتیبانی نمی شود.

مدیریت دولت v2: داده های خود قابل مشاهده است

مکانیسم اصلی: داده ها به خودی خود قابل مشاهده می شوند. هرگونه تغییر داده ها به طور مستقیم به روزرسانی های مربوطه را تحریک می کند.

مزایا:

• متغیرهای حالت مستقل از UI هستند و تغییرات داده ها فوراً در تمام دیدگاه های مربوطه منعکس می شوند ، اطمینان از داده ها و UI همیشه هماهنگ می شوند.
• از مشاهده عمیق و گوش دادن ، با مکانیسم مشاهده بهینه که عملکرد را حفظ می کند ، پشتیبانی می کند.
• به روزرسانی های دقیق را در سطح خاصیت شیء و به روزرسانی های حداقل برای عناصر آرایه ، بهبود کارآیی امکان پذیر می کند.
• دکوراتورها کاربر پسند و بسیار گسترده هستند. ورودی و خروجی در مؤلفه ها واضح است و توسعه و نگهداری مؤلفه را تسهیل می کند.

متغیرهای حالت

بیایید با اصول اولیه شروع کنیم – ایجاد یک متغیر حالت. در V1 ، این کار با استفاده از آن انجام شد @State، اما در V2 ، یک دکوراتور جدید @Local استفاده می شود:

@Local var: SomeType = SomeValue

در مقایسه با @Stateبا @Local از کار نه اجازه می دهد تا اولیه سازی بیرونی ، نقش خود را به عنوان “وضعیت داخلی” روشن تر کند.

علاوه بر این ، با جدید @ObservedV2 وت @Trace قابلیت ها ، مشاهده متغیرهای حالت داخلی ساده تر است و دیگر نیازی به آن نیست @ObjectLinkبشر

در @ObservedV2 وت @Trace از دکوراتورها برای تزئین کلاس ها و خصوصیات آنها استفاده می شود و مشاهده عمیق را قادر می سازد:

• @ObservedV2 وت @Trace باید با هم استفاده شود استفاده از هر یک به تنهایی هیچ تاثیری ندارد.
• هنگامی که یک ملک تزئین شده با @Trace تغییرات ، فقط مؤلفه های مرتبط با آن خاصیت تازه می شوند.
• برای کلاس های تو در تو ، یک ملک باید با آن تزئین شود @Trace، و خود کلاس تو در تو باید با آن تزئین شود @ObservedV2 برای به روزرسانی های UI.

مثال:

@ObservedV2
class Person {
  @Trace age: number = 100;
}

@Entry
@ComponentV2
struct Index {
  father: Person = new Person();

  build() {
    Column() {
      Text(`${this.father.son.age}`)
        .onClick(() => {
          this.father.son.age++;
        })
    }
  }
}

ترکیبی از @ObservedV2 با @Trace پشتیبانی می کند:

• کلاسهای تو در تو
• کلاسهای ارثی
• آرایه هایی از انواع اساسی/شی
• Map وت Set انواع

با این حال ، آن پشتیبانی نمی کند انواع مورد نیاز JSON.stringify سریال سازی

شروع بیرونی

معمول است که مؤلفه های کودک به پارامترهای خارجی نیاز داشته باشند. در چنین مواردی ، @Param دکوراتور استفاده می شود. جایگزین پیرتر می شود @Prop (اولیه سازی با کپی) و @Link (اولیه سازی با هماهنگ سازی) ، آنها را به یک هماهنگ سازی یک طرفه از والدین به کودک تبدیل کنید. همچنین امکان اولیه سازی محلی را فراهم می کند. برای اجرای پارامترهای مورد نیاز ، اضافه کنید @Require دکوراتور

نمونه ای از یک مؤلفه سفارشی با اولیه سازی پارامتر:

@ComponentV2
export struct ActionButton {
  @Param @Require icon: Resource
  @Param @Require clickAction: () => void

  build() {
    Button() {
      SymbolGlyph(this.icon)
        .fontSize(24)
        .fontColor([$r('sys.color.font_primary')])
    }.onClick(() => { this.clickAction(); })
    .backgroundColor($r('sys.color.comp_background_secondary'))
    .padding(8)
    .clickEffect({
      level: ClickEffectLevel.LIGHT
    })
  }
}

استفاده همانند V1 است.

حمایت اولیه سازی یک بار بدون پاسخ به تغییرات آینده والدین ، ​​V2 معرفی می کند @Once دکوراتور از آن استفاده کنید @Param برای رهگیری تغییرات داده والدین.

همگام سازی دو طرفه

برای دستیابی به هماهنگ سازی از کودک به والدین یا همگام سازی دو جهته ، V2 دو مکانیسم را فراهم می کند:

@ ارائه دهنده و consumer: هماهنگ سازی سلسله مراتبی متقابل

مکانیسم ارائه دهنده جدید شبیه به اصل است @Provide، اما با قابلیت های پیشرفته:

• @Consumer در صورت عدم تطبیق ، اولیه سازی محلی را با مقادیر پیش فرض اجازه می دهد @Provider یافت می شود
• @Consumer از انواع عملکرد پشتیبانی می کند.
• @Provider وت @Consumer پشتیبانی از اضافه بار – multiple @ProviderS با همین نام مجاز است ، و @Consumer نزدیکترین نگاه خواهد کرد @Providerبشر

دکوراتور Event: خروجی مؤلفه استاندارد

در @Event دکوراتور اجزای کودک را قادر می سازد متغیرهای والدین را به روز کنند. هنگامی که متغیر والدین نیز منبع داده کودک است @Param، تغییرات به عقب همگام می شوند. از آنجا که من شخصاً از این الگوی زیاد استفاده نمی کنم ، در اینجا توضیح نمی دهم.

AppStoragev2

استفاده از AppStorageV2 در مقایسه با V1 ساده تر است. دیگر استفاده نمی کند @StorageProp وت @StorageLinkبشر در عوض ، آن را تصویب می کند الگوی تک آهنگ جهانی:

@Local windowAvoidance: WindowAvoidanceData =
    AppStorageV2.connect(WindowAvoidanceData, SCApp.windowAvoidance, () => new WindowAvoidanceData(0, 0))!

در این مثال (برای ضبط مقادیر جلوگیری از پنجره استفاده می شود):

• در پارامتر اول نوع است
• در دوم نام مستعار است
• در سوم عملکرد اولیه سازی پیش فرض است.

از آنجا که مقدار بازده قابل تهی است اما ما یک اولیه ساز پیش فرض را ارائه می دهیم ، می توانیم با خیال راحت اضافه کنیم !بشر