reactjs Angular的生命周期是否与React的生命周期useEffect相同?它是什么,示例是什么?

9avjhtql  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(197)

我对Angular 生命周期有困难
例如,我想在更改特定状态/属性时执行一些操作
React代码示例:

const [isChanged, setIsChanged] = useState(false);

useEffect(() => {
     // do some actions I expect here
}, [isChanged]);

如何将上面的代码转换成角代码。非常感谢!

jvlzgdj9

jvlzgdj91#

Angular具有OnChanges接口,该接口提供ngOnChanges生命周期方法。
以下是官方文档中的示例:

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
  @Input() prop: number = 0;

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }
}

这是所有属性更改的总括。
如果您只想在某个特定属性发生更改时执行某些操作,那么只使用该属性的setter并在那里调用所需的行为可能会更“干净”,例如:

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
  _prop: number = 0;
  @Input() set prop(value: number) {
    const oldValue = this._prop;
    this._prop = value;
    this.onPropChange(oldValue, this._prop);
  }

  get prop(): number {
    return this._prop;
  }

  onPropChange(oldValue: number, newValue: number) {
  }
}

相关问题