معرفی سیگنال های زاویه ای – انجمن DEV

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

کار با سیگنال ها

سه روش متمایز وجود دارد که می توان برای دستکاری مقادیر سیگنال در Angular استفاده کرد.

تنظیم() این روش اجازه می دهد تا مقدار فعلی سیگنال را با یک سیگنال جدید جایگزین کنید.

numb = signal(1);

numb.set(2);

به روز رسانی() این روش می تواند برای تغییر مقدار سیگنال بر اساس مقدار فعلی آن استفاده شود.

name = signal('Dino');
name.update((value) => value + '1337') // Dino1337

mutate() روش برای تغییر محتوای یک مقدار سیگنال، بدون جایگزینی خود مقدار سیگنال استفاده می شود. هنگام کار با آرایه ها، می توانید از این روش برای اصلاح عناصر آرایه استفاده کنید. به طور مشابه، هنگام کار با اشیا، از این روش می توان برای اصلاح ویژگی های شی خاص استفاده کرد.

arr = signal([]);
arr.mutate((v) => v.push(i));

obj = signal({ name });
obj.mutate((v) => v.name="Dino");

سیگنال های محاسبه شده

من معتقدم که این قوی‌ترین مورد استفاده برای سیگنال‌های اولیه کار تا کنون بوده است، و دلیل آن در اینجا آمده است:

@Component({ 
  template: `
    {{ fullnameA }} // will not update
    {{ fullnameB() }} // will update

    <button (click)="changeSurname()">Change surname</button>
  `
})
export class App {
  nameA = 'John';
  surnameA = 'Doe';
  fullnameA = this.nameA + this.surnameA;

  nameB = signal('Jane');
  surnameB = signal('Doe');
  fullnameB = computed(() => this.nameB() + this.surnameB());

  changeSurname() {
    this.surnameA = 'Haaland';
    this.surnameB.set('Ibrahimovic');
  }
}

در نگاه اول، بسیاری ممکن است تصور کنند که تغییر متغیر surnameA به طور خودکار متغیر fullnameA را به‌روزرسانی می‌کند، درست همانطور که اگر از یک عبارت Angular استفاده می‌کردیم. {{ nameA + surnameA }}. به هر حال، این چنین نیست.

استفاده كردن سیگنال ها (سیگنال های محاسباتی)، که به طور خودکار هر زمان که هر یک از سیگنال های وابسته آنها تغییر کند، دوباره محاسبه می شوند، می توانیم به این دست یابیم.

اما هی، البته این کار می کند! سیگنال ها توابع هستند و ما در اینجا به فراخوانی تابع متصل هستیم. و همه ما می دانیم که انجام ندادن این یک قانون طلایی است.
ما همچنین می توانیم کاری شبیه به این انجام دهیم:

  {{ fullnameA() }}

  fullnameA = () => this.nameA + this.surnameA;

و این کار به… اما!

این نشان می‌دهد که ()fullnameA هر زمان که تشخیص تغییر راه‌اندازی شود فراخوانی می‌شود، در حالی که سیگنال fullnameB () تنها زمانی فراخوانی می‌شود که سیگنال وابسته آن به‌روزرسانی شود. این ویژگی قابل توجه است زیرا استفاده از سیگنال ها امکان مدیریت دقیق تری از تشخیص تغییرات را فراهم می کند که می تواند منجر به عملکرد بهتر شود.

علاوه بر این، سیگنال‌های محاسبه‌شده تحت دو شرایط دوباره محاسبه می‌شوند: زمانی که یک یا چند سیگنال وابسته آن تغییر می‌کند، و زمانی که مقدار سیگنال محاسبه‌شده خوانده می‌شود.

استفاده از افکت

افکت سیگنال برای اطلاع‌رسانی هنگام به‌روزرسانی (تغییر) سیگنال شما بسیار مفید است، بنابراین می‌توانید آن را وارد کنید یا تماس‌های API برقرار کنید (همانطور که می توانید با استفاده از React این کار را انجام دهید).

effect(() => console.log(this.selected()));
effect(() => apiCall(this.param());

خلاصه

تا کنون، همانطور که قبلا توضیح داده شد، ویژگی مورد علاقه من سیگنال های محاسبه شده بود. علاوه بر این، اکنون افکت‌ها راه مناسبی را برای تماشا و واکنش به به‌روزرسانی‌های سیگنال خود ارائه می‌دهند.

تا آن زمان، توصیه می‌کنم سعی کنید یاد بگیرید که چگونه هر دوی این ابزارها با هم بازی می‌کنند تا بتوانید بهترین ابزار را برای کار انتخاب کنید تا کد ساده‌تر، خوانا و کارآمدتر بنویسید.

من این ویدیو را از جاش مورونی توصیه می کنم:
https://www.youtube.com/watch?v=4FkFmn0LmLI

و همچنین این ویدیو از دبورا کوراتا:
https://www.youtube.com/watch?v=a6XKMj-WRhM

برای بررسی مقایسه‌های احتمالی بین استفاده از سیگنال‌ها در مقابل مشاهده‌پذیرها.