角度:セッター対NGonchange -どちらがよりよいですか?

この投稿は当初公表されたAngular Bites
角度コンポーネントのプロパティの変更について通知を取得するには、通常2つの方法で行います

プロパティへのセッターの追加

使用ngOnChanges ライフサイクルフック

でも.最高の練習はありますか.
この議論は、私たちのcodebaseで標準的な実行を確立しようとしている間、私の同僚と最近やって来ました.我々はどちらが良いかを理解する客観的な議論を見つけようとした.
いつものように、答えはシナリオによって異なります.

スタイル

スタイルは非常に主観的な要因ですが、セッターを使用して私の好きなアプローチを手です.一般的なシナリオを見てみましょう.

class MyComponent {
  private subject$ = new Subject<string>();

  @Input()
  set name(name: string) {
    this.subject$.next(name);
  }
}

それは簡潔で、タイプセーフで、オブザーバブルの使用を奨励します.嫌いではなく、imho.
しかし、あなたはゲッターを追加することはできますか?
はい.角では、プロパティのGetterを呼び出すことによって前の値をチェックしませんが、その値をそのコンポーネントの論理ビューに格納します.
ソースコードの読み込みに興味があれば、check this out .

class MyComponent implements OnChanges {
  @Input() name: string;

  private subject$ = new Subject<string>();

  ngOnChanges(changes: SimpleChanges) {
    // changes.name.currentValue is typed as `any`
    this.subject$.next(changes.name.currentValue);
  }
}

The ngOnChanges LifeCycleフックは、反対に、それは良い(私の意見ではない)-そして最も重要なのは、弱いタイプです.
また、セッターを使用することは通常より少ないコードを取ります.

パフォーマンス

性能は変化するか最初に、私たちはngOnChanges アングルのライフサイクルフックの一部としてより効率的であり、したがって、プロパティが変更されたときに気づいています.
しかし、その角はバインディングが新しいインスタンスであるときにプロパティを変更するだけです.もちろん、私たちは考慮されている変化検出OnPush .
パフォーマンスは賢明です、私のテストによると、より良い方法がありません、そして、どちらの道を行くべきかについて決めるとき、要因であるべきではありません.

複数の入力を扱う

複数の入力の変更を考慮すると状況が変わります.

class MyComponent implements OnChanges {
  @Input() name: string;
  @Input() email: string;

  private username$ = new Subject<string>();

  ngOnChanges({ name, email }: SimpleChanges) {
    const username = name.currentValue || email.currentValue;
    this.username$.next(username);
  }
}

この場合、すべての入力を一度に受け取ることは、かなり簡単で、より簡単です.
しかし、この状況はかなり珍しいので、時にはコードの匂いの兆候は、あなた自身の時間の大半のセッターを使用したい見つけることができます.
その日の終わりには、この決定は常にあなたとあなたのチームの好みにされていることを忘れないでください.
このポストを楽しんでください.チャオ!