react 生命挂钩_角生命周期挂钩：ngOnChanges，ngOnInit等

react 生命挂钩

为什么我们需要生命周期挂钩？ (Why do we need lifecycle hooks?)

Modern front-end frameworks move the application from state to state. Data fuels these updates. These technologies interact with the data which in turn transitions the state. With every state change, there are many specific moments where certain assets become available.

现代的前端框架将应用程序从一个州转移到另一个州。 数据助长了这些更新。 这些技术与数据交互，从而转换状态。 每次状态更改时，都有许多特定时刻可使用某些资产。

At one instance the template might be ready, in another data will have finished uploading. Coding for each instance requires a means of detection. Lifecycle hooks answer this need. Modern front-end frameworks package themselves with a variety of lifecycle hooks. Angular is no exception

在一个实例中，模板可能已准备就绪，而在另一实例中，数据已完成上传。 每个实例的编码都需要一种检测手段。 生命周期挂钩可满足此需求。 现代的前端框架通过各种生命周期挂钩将自身包装在一起。 角度也不例外

生命周期挂钩说明 (Lifecycle Hooks Explained)

Lifecycle hooks are timed methods. They differ in when and why they execute. Change detection triggers these methods. They execute depending on the conditions of the current cycle. Angular runs change detection constantly on its data. Lifecycle hooks help manage its effects.

生命周期挂钩是定时方法。 它们在执行时间和执行方式上有所不同。 更改检测将触发这些方法。 它们根据当前循环的条件执行。 Angular不断对其数据进行更改检测。 生命周期挂钩有助于管理其影响。

An important aspect of these hooks is their order of execution. It never deviates. They execute based on a predictable series of load events produced from a detection cycle. This makes them predictable.

这些挂钩的重要方面是它们的执行顺序。 它永远不会偏离。 它们基于检测周期产生的一系列可预测的负载事件执行。 这使它们可预测。

Some assets are only available after a certain hook executes. Of course, a hook only execute under certain conditions set in the current change detection cycle.

某些资产仅在执行某些挂钩后才可用。 当然，挂钩仅在当前变化检测周期中设置的特定条件下执行。

This article presents the lifecycle hooks in order of their execution (if they all execute). Certain conditions merit a hook’s activation. There are a few who only execute once after component initialization.

本文按生命周期挂钩的执行顺序(如果它们都执行)介绍了生命周期挂钩。 某些条件值得钩子激活。 有些组件在组件初始化后只执行一次。

All lifecycle methods are available from @angular/core. Although not required, Angular recommends implementing every hook. This practice leads to better error messages regarding the component.

所有生命周期方法都可以从@angular/core 。 尽管不是必需的，但Angular 建议实现每个hook 。 这种做法导致有关该组件更好的错误消息。

生命周期挂钩执行命令 (Order of Lifecycle Hooks' Execution)

ngOnChanges (ngOnChanges)

ngOnChanges triggers following the modification of @Input bound class members. Data bound by the @Input() decorator come from an external source. When the external source alters that data in a detectable manner, it passes through the @Input property again.

ngOnChanges在修改@Input绑定类成员ngOnChanges触发。 @Input()装饰器绑定的数据来自外部源。 当外部源以可检测的方式更改该数据时，它将再次通过@Input属性。

With this update, ngOnChanges immediately fires. It also fires upon initialization of input data. The hook receives one optional parameter of type SimpleChanges. This value contains information on the changed input-bound properties.

有了此更新， ngOnChanges立即触发。 输入数据初始化时也会触发。 挂钩接收一个类型为SimpleChanges可选参数。 此值包含有关更改的输入绑定属性的信息。

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  <h3>Child Component</h3>
  <p>TICKS: {
   { lifecycleTicks }}</p>
  <p>DATA: {
   { data }}</p>
  `
})
export class ChildComponent implements OnChanges {
  @Input() data: string;
  lifecycleTicks: number = 0;

  ngOnChanges() {
    this.lifecycleTicks++;
  }
}

@Component({
  selector: 'app-parent',
  template: `
  <h1>ngOnChanges Example</h1>
  <app-child [data]="arbitraryData"></app-child>
  `
})
export class ParentComponent {
  arbitraryData: string = 'initial';

  constructor() {
    setTimeout(() => {
      this.arbitraryData = 'final';
    }, 5000);
  }
}

Summary: ParentComponent binds input data to the ChildComponent. The component receives this data through its @Input property. ngOnChanges fires. After five seconds, the setTimeout callback triggers. ParentComponent mutates the data source of ChildComponent’s input-bound property. The new data flows through the input property. ngOnChanges fires yet again.

摘要： ParentComponent将输入数据绑定到ChildComponent。 该组件通过其@Input属性接收此数据。 ngOnChanges触发。 五秒钟后，将触发setTimeout回调。 ParentComponent更改ChildComponent的input-bound属性的数据源。 新数据流经input属性。 ngOnChanges再次触发。

ngOnInit (ngOnInit)

ngOnInit fires once upon initialization of a component’s input-bound (@Input) properties. The next example will look similar to the last one. The hook does not fire as ChildComponent receives the input data. Rather, it fires right after the data renders to the ChildComponent template.

初始化组件的输入绑定( &#