Angular 4 life cycle functions and the equivalent React.js ones, for fun
Now I am using Angular 4 building a complex form. With Reactive forms, it’s quite easy to generate a form with model and change it on the fly, by addControl() and removeControl() functions in FormGroup. But sometimes I got an error saying “EXCEPTION: Expression has changed after it was checked”. => This is related to Angular 4’s change detection process, after several hours searching on the internet.
Not like React.js, you always control when and where to start a re-render, Angular 4 is trying to make this easier for you, but in my opinion, it really confuses developers.
First, when you render a component, Angular 4 will generate a Tree model for the app. And then it will run the first Change Detection.
As a result, you will have the initial data binding. At this moment, you get an ngOnInit() hook triggered (Only once).
Just in case, there are anything Angular could not detect, it provide you another hook, called ngDoCheck() function. Inside this function, you can do your own check and use markForCheck() to tell Angular the component needs a check (re-render).=> Then Angular 4 runs the change detection and update the component.
The same process will be continued for the content children (ngAfterContentInit, ngAfterContentChecked), and all view children (ngAfterViewInit, ngAfterViewChecked).
Because Angular 4 is doing the update immediately after the Change Detection for a component, ngAfterContentChecked, and ngAfterViewChecked means all the children has been updated.
When the component is destroyed, Angular will call ngOnDestroy hook function.
It’s a little confusing compared to React.js, honestly. And I am trying to find the equivalent hook to React.js components, which is not an exact match.
First, for the first time render, ngOnInit should be the same as getDefaultProps(), getInitialState() and now the constructor of the component.
ngAfterContentInit() or ngAfterViewInit() should be the componentWillMount().
render() and re-render() happens when the Change Detection running.
ngAfterContentChecked() and ngAfterViewChecked() should be componentDidMount() and componentDidUpdate().
ngOnDestroy = componentDidUnmount().
How about componentWillReceiveProps() and shouldComponentUpdate()?
Basically, the props will be bind automatically by Angular, so I suppose the setter and getter function will be that part, which gives you a way to generate complex state or variable, like what you can do in componentWillReceiveProps().
If you detach the component and do the check in ngDoCheck(), call markForCheck() by yourself, this should be the shouldComponentUpdate() function. :P
But, Angular 4’s Tree change detection model is not bottom to top… It’s from ancestors to current component. Because the Change Detection always fire from the App root.
Also, unlike AngularJS, the $digest() function can be called recursively by 10 times, Angular 4’s Change Detection only run once for each trigger: ajax, setTimeOut, and DOM events, which is like one way data flow.
That’s why the “EXCEPTION: Expression has changed after it was checked” happens. In this case, you should trigger a changeDetectorRef.detectChanges() function call. This will manually do a check in the next tick and update the current components and it’s children.
That’s my understanding. Just for fun. :) And it’s too complex… I am going back to my back end development tomorrow.
Angular 4’s source code:
React.js’s Source code:
