perf: using pure setter with OnChange hook

[trotyl]

Tracking

• nz-affix (refactor(module:affix): using pure setter #708)
• nz-alert
• nz-link
• nz-anchor
• nz-avatar
• nz-back-top
• nz-badge
• nz-breadcrumb-item
• nz-breadcrumb
• nz-button-group
• nz-button

...

What problem does this feature solve?

Single check

Currently we're using manual change guarding in several places like:

set nzProp(value: Type)
  if (this._prop === value) {
    return;
  }
  this._prop = value;
}

This could introduce extra checking for _prop since Angular itself will check all the inputs (if ngOnChange exists).

Batch update

Currently we're using setter with side-effects, like:

set nzProp1(value: Type)
  this._prop1 = value;
  this.updateStatus();
}

set nzProp2(value: Type)
  this._prop2 = value;
  this.updateStatus();
}

It would lead to redundant update when changing multiple properties:

comp.nzProp1 = newValue1;
comp.nzProp2 = newValue2;

The updateStatus have been called twice, which is unnecessary.

Unified handling

In some components there're recording of life-cycle status, like:

ngOnInit() {
  this._inited = true;
}

set nzProp(value: Type)
  if (this._inited) {
    this.updateStatus();
  }
}

Which leads to extra condition flow (not a real performance problem, but maintenance problem)

Solution

Make setter being pure (and do not use accessor whenever possible) while perform side-effects only in ngOnChange, like:

set nzProp1(value: Type)
  this._prop1 = value;
}

set nzProp2(value: Type)
  this._prop2 = value;
}

ngOnChange(changes: SimpleChanges): void {
  if (changes.nzProp1 || changes.nzProp2) {
    this.updateStatus();
  }
}

Since OnChange will also be called before OnInit, no need for special handling in setup.

Depends on #459.

What does the proposed API look like?

N/A.

[wzhudev]

Closing this cause related pr had been merged.