角度信号を理解する: 包括的なガイド

このガイドでは、状態管理を簡素化する最新のリアクティブ プログラミング パラダイムである Angular Signals について説明します。 書き込み可能信号や計算信号などのコア機能を調べ、エフェクトでの使用法を示します。 実践的な例により理解が深まります。

角度信号を理解する

Angular Signals は、状態をより予測可能かつ管理しやすいように設計されたリアクティブ プリミティブです。古いメソッド (Observables、EventEmitters) とは異なり、シグナルはリアクティブな変数に対するよりクリーンなアプローチを提供し、状態の変化に関するビューを自動的に更新します。

主要信号属性:

• 同期更新: 信号の変更はすぐに反映されます。
• 依存関係の追跡: Angular は、コンポーネントおよびディレクティブ内の信号の依存関係を自動的に追跡します。
• 直感的な使用法: シグナルは、Observable と比較して状態管理を合理化します。

書き込み可能な信号: 基本

書き込み可能なシグナルは基本的な構成要素であり、変更可能な反応状態を表します。

書き込み可能な信号の作成:

signal() 関数を使用します:

<code class="language-typescript">import { signal } from '@angular/core';

export class CounterComponent {
  counter = signal(0);

  increment() {
    this.counter.update(val => val + 1);
  }

  decrement() {
    this.counter.update(val => val - 1);
  }
}</code>

書き込み可能な信号メソッド:

1. set(newValue): 新しい値を直接割り当てます。 this.counter.set(10);
2. update(callback): コールバック関数を使用して更新します。 this.counter.update(val => val * 2);
3. mutate(callback): オブジェクトまたは配列を直接変更します。 this.arraySignal.mutate(arr => arr.push(5));

計算された信号: 導出値

計算された信号は他の信号から値を取得し、依存関係が変更されると自動的に更新されます。 これらは読み取り専用です。

計算信号の定義:

computed() 関数を使用します:

<code class="language-typescript">import { signal, computed } from '@angular/core';

export class PriceCalculator {
  price = signal(100);
  quantity = signal(2);
  totalPrice = computed(() => this.price() * this.quantity());
}</code>

price または quantity を更新すると、totalPrice が自動的に再計算されます。

効果: 副作用の管理

エフェクトは、信号が変化すると副作用 (ロギング、API 呼び出し、DOM 操作) を実行します。

エフェクトの作成:

effect() 関数を使用します:

<code class="language-typescript">import { signal, effect } from '@angular/core';

export class EffectExample {
  counter = signal(0);

  constructor() {
    effect(() => console.log('Counter:', this.counter()));
  }

  increment() {
    this.counter.update(val => val + 1);
  }
}</code>

効果の使用例:

• コンソールのログ
• HTTP リクエスト
• 外部 DOM 操作

完全な例: カウンター アプリ

このカウンター アプリは、書き込み可能な計算された信号とエフェクトを示します。

<code class="language-typescript">import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Counter: {{ counter() }}</p>
      <p>Double: {{ doubleCounter() }}</p>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
    </div>
  `
})
export class CounterComponent {
  counter = signal(0);
  doubleCounter = computed(() => this.counter() * 2);

  constructor() {
    effect(() => console.log('Counter changed:', this.counter()));
  }

  increment() {
    this.counter.update(val => val + 1);
  }

  decrement() {
    this.counter.update(val => val - 1);
  }
}</code>

シグナルのベストプラクティス:

1. 影響を最小限に抑える: 副作用を簡潔にまとめます。
2. 計算された信号を使用: 派生状態の場合は、computed() を優先します。
3. 過剰な突然変異を避ける: update() よりも mutate() を優先します。
4. Dependency Injection と組み合わせる: 信号をサービスと統合してスケーラビリティを実現します。

結論

Angular Signals は、リアクティブな状態管理に対する最新の効率的なアプローチを提供します。そのシンプルさと機能により、開発者のエクスペリエンスとアプリケーションのパフォーマンスが向上し、より保守しやすく予測可能な Angular コードが実現します。

以上が角度信号を理解する: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。