Angular 性能篇三 懒渲染(OnPush) vs 独立渲染(detach)
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的时候，目标组件是不会参与 CD 的。
如何在 Angular 中实现部分 CD.
- 调用
ChangeDetachRef.detach(),方法，就可以把该节点对于的子树从 Angular 树上面摘出，然后通过显示调用 detachChanges,来刷新。
