Angular 效能篇三

懶渲染(OnPush) vs 獨立渲染(detach). 先拋問題。

• 針對獨立渲染的元件呼叫detectChanges(),Angular 的元件樹如何做 CD?
• ngDoCheck 能否作為判斷元件參與 CD 的指標？
• Angular 中如何做到與 React 一樣的 setState, 部分樹的更新？

獨立渲染對於元件樹的 CD 的影響

這個取決於觸發呼叫detectChanges()的觸發源。

• 如果觸發這個函式呼叫是在 ngZone 之內，那麼，Angular 元件樹會做 CD, 獨立渲染的元件樹也會做 CD。兩者獨立。
• 如果是在 ngZone 之外觸發的，那麼，只有獨立渲染樹觸發 CD。

這個也是可以理解的，zone 之內的事件一定會觸發 Angular 元件樹的 CD,哪怕事件源頭 detach 了， 但是還是不影響這個規則。其次，你既然針對獨立渲染節點呼叫了 detechChanges,那麼它就會按照規則 CD 這個獨立的樹

ngDoCheck 不能作為判斷參與 CD 的指標。

ngDoCheck 是在目標元件 CD 之前執行，它於 ngOnChanges,ngOnInit 鉤子之後，ngDoCheck 之後如果發現目標元件有改動，才會進入目標元件做 CD。

不妨把話說的更直白一點，ngOnChanges,ngOnInit,ngDoCheck 這三個鉤子是在目標元件的父級元件做 CD 的時候執行的，由父級呼叫。而這個時候，目標元件要不要做 CD,完全取決於這三個鉤子執行的結果。如果輸入沒有改動，同時目標元件又是 OnPush

如何在 Angular 中實現部分 CD.

• 呼叫ChangeDetachRef.detach(), 方法，就可以把該節點對於的子樹從 Angular 樹上面摘出，然後通過顯示呼叫 detachChanges,來重新整理。