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,来刷新。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
2018-03-16 Authencation WebApi Learning