内容提要
使用OnPush时,组件仅在特定情况下更新:1️⃣ @Input()变化;2️⃣ DOM事件;3️⃣ async管道;4️⃣ 手动调用markForCheck();5️⃣ setTimeout或setInterval内的变化;6️⃣ HTTP请求后变化;7️⃣ 使用reattach()重新激活检测。OnPush可提升性能,但在关键情况下仍会更新。
延伸解读
OnPush的性能优势
使用OnPush策略可以显著提升Angular应用的性能,因为它减少了不必要的变更检测。通过仅在特定情况下更新组件,开发者可以优化应用的响应速度,尤其是在大型应用中,避免了每次变更都进行全面检测的开销。
手动更新的必要性
尽管OnPush提高了性能,但在某些情况下仍需手动触发更新。例如,当使用setTimeout或HTTP请求时,开发者必须调用markForCheck()来确保组件更新。这要求开发者在设计时考虑到这些手动更新的需求,以避免数据不一致的问题。
@Input()变化的重要性
在使用OnPush时,@Input()的引用变化是触发组件更新的关键因素。开发者需要注意,仅修改对象内部属性不会触发更新,因此在需要更新视图时,务必创建新对象以确保引用变化。这是确保组件正确响应外部数据变化的基本策略。
Q&A
使用OnPush时,组件在什么情况下会更新?
组件在@Input()变化、DOM事件、async管道、手动调用markForCheck()、setTimeout或setInterval内的变化、HTTP请求后变化以及使用reattach()重新激活检测时会更新。
如何强制更新OnPush组件?
可以通过手动调用markForCheck()或detectChanges()来强制更新OnPush组件。
在使用async管道时,OnPush组件会如何更新?
当Observable发出新值时,使用async管道的OnPush组件会自动更新。
如果@Input()的引用没有变化,OnPush组件会更新吗?
不会,只有当@Input()的引用变化时,Angular才会更新组件。
在setTimeout中修改变量时,OnPush组件会自动更新吗?
不会,除非使用markForCheck(),否则setTimeout中的变化不会自动更新组件。
使用reattach()有什么作用?
使用reattach()可以重新激活被detach()停用的变化检测。