چگونه سیگنال ها عملکرد برنامه شما را بهبود می بخشند

Summarize this content to 400 words in Persian Lang
سلام، در این مقاله، من نشان خواهم داد که چگونه سیگنال ها می توانند عملکرد برنامه شما را به طور قابل توجهی بهبود بخشند و توضیح می دهم که چرا باید از آنها استفاده کنید.

شاید قبلاً با نحوه استفاده سیگنال‌ها از ChangeDetection در Angular آشنا باشید. با این حال، امروز ما بر روی RxJS تمرکز خواهیم کرد، به ویژه یکی از اپراتورهای مورد علاقه من: ترکیب آخرین. مفاهیم مورد بحث در اینجا برای سایر اپراتورها نیز قابل استفاده است.

من مطمئن هستم که برنامه Angular شما دارای خطوط کد زیادی شبیه به این مثال است

public combinedStream$ = combineLatest([first, second, third]).pipe(
…
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما می دانیم که ترکیب آخرین برای اولین بار هنگامی که همه موارد – در این مورد، اول، دوم، و سوم- مقادیر اولیه خود را منتشر کرده اند. پس از آن، هر بار که هر یک از آیتم های آرایه مقدار جدیدی را منتشر می کند، فعال می شود.

بیایید آن را تصور کنیم اول، دوم، و سوم عملیات ناهمزمانی هستند که مقادیر جدیدی را تقریباً همزمان منتشر می کنند و باعث به روز رسانی DOM می شوند (به جای به روز رسانی DOM فقط مقدار شمارنده console.log).

به نظر شما چه چیزی در کنسول وجود خواهد داشت؟

@Component({
selector: ‘my-component’,
standalone: true,
imports: [CommonModule],
template: “,
})
export class MyComponent {
public first = interval(1000).pipe(take(3));
public second = interval(1000).pipe(take(3));
public third = interval(1000).pipe(take(3));

public counter = 0;

public combinedStream$ = combineLatest([this.first, this.second, this.third]).pipe(
take(10),
map(() => ++this.counter),
);

ngOnInit() {
this.combinedStream$.subscribe(console.log)
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خروجی:

1
2
3
4
5
6
7

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا 7 و نه 9 (دریافت (3) x 3 جریان = 9) زیرا ترکیب آخرین برای اولین بار هنگامی که همه موارد – در این مورد، اول، دوم، و سوم- مقادیر اولیه خود را منتشر کرده اند.

در اینجا مشکلی وجود دارد که همه جریان ها به طور همزمان منتشر می کنند فاصله (1000)

// 1 second
1
// 2 second
2
3
4
// 3 second
5
6
7

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

آیا می توانیم برای بهبود عملکرد خود از اجرای 2، 3، 5 و 6 بگذریم؟ بله، ما می توانیم، اما این فقط یک ترفند است debounceTime (0) و من بسیاری از توسعه دهندگان Angular حتی به چنین کاهش عملکردی فکر نمی کنم

@Component({
selector: ‘my-component’,
standalone: true,
imports: [CommonModule],
template: “,
})
export class MyComponent {
public first = interval(1000).pipe(take(3));
public second = interval(1000).pipe(take(3));
public third = interval(1000).pipe(take(3));

public counter = 0;

public combinedStream$ = combineLatest([this.first, this.second, this.third]).pipe(
take(10),
debounceTime(0),
map(() => ++this.counter),
);

ngOnInit() {
this.combinedStream$.subscribe(console.log)
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خروجی:

1
2
3

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

عملکرد بیش از 2 برابر درست است؟

من یک خبر خوب برای شما دارم: سیگنال این کار را در زیر کاپوت انجام می دهد

@Component({
selector: ‘my-component’,
standalone: true,
imports: [CommonModule],
template: “,
})
export class MyComponent {
first = signal(0);
second = signal(0);
third = signal(0);

counter = 0;

computedSignal = computed(() => {
this.counter++;
console.log(this.counter);
return `${this.first()} ${this.second()} ${this.third()}`;
});

ngOnInit() {
interval(1000).pipe(take(3)).subscribe((value) => {
this.first.set(value);
this.second.set(value);
this.third.set(value);
})
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خروجی:

1
2
3

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

امیدوارم این مورد برای شما مفید یا حداقل جالب بوده باشد. با خیال راحت با مثال آزمایش کنید تا درک بهتری کسب کنید

public combinedStream$ = combineLatest([first, second, third]).pipe(
    ...
);

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule],
  template: ``,
})
export class MyComponent {
  public first = interval(1000).pipe(take(3));
  public second = interval(1000).pipe(take(3));
  public third = interval(1000).pipe(take(3));

  public counter = 0;

  public combinedStream$ = combineLatest([this.first, this.second, this.third]).pipe(
    take(10),
    map(() => ++this.counter),
  );

  ngOnInit() {
    this.combinedStream$.subscribe(console.log)
  }
}

1
2
3
4
5
6
7

// 1 second 
1
// 2 second
2
3
4
// 3 second
5
6
7

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule],
  template: ``,
})
export class MyComponent {
  public first = interval(1000).pipe(take(3));
  public second = interval(1000).pipe(take(3));
  public third = interval(1000).pipe(take(3));

  public counter = 0;

  public combinedStream$ = combineLatest([this.first, this.second, this.third]).pipe(
    take(10),
    debounceTime(0),
    map(() => ++this.counter),
  );

  ngOnInit() {
    this.combinedStream$.subscribe(console.log)
  }
}

1
2
3

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule],
  template: ``,
})
export class MyComponent {
  first = signal(0);
  second = signal(0);
  third = signal(0);

  counter = 0;

  computedSignal = computed(() => {
    this.counter++;
    console.log(this.counter);
    return `${this.first()} ${this.second()} ${this.third()}`;
  });

  ngOnInit() {
    interval(1000).pipe(take(3)).subscribe((value) => {
      this.first.set(value);
      this.second.set(value);
      this.third.set(value);
    })
  }
}

1
2
3