DEV Community
·
🔥 使用 `OnPush` 时组件何时更新？
内容提要
使用OnPush时，组件仅在特定情况下更新：1️⃣ @Input()变化；2️⃣ DOM事件；3️⃣ async管道；4️⃣ 手动调用markForCheck()；5️⃣ setTimeout或setInterval内的变化；6️⃣ HTTP请求后变化；7️⃣ 使用reattach()重新激活检测。OnPush可提升性能，但在关键情况下仍会更新。
关键要点
-
使用OnPush时，组件仅在特定情况下更新。
-
1️⃣ @Input()变化：如果@Input()的引用变化，Angular会更新组件。
-
❌ 仅修改内部属性不会触发更新。
-
💡 解决方案：分配一个新对象以强制检测变化。
-
2️⃣ DOM事件：如(click)、(input)等事件会触发更新。
-
3️⃣ 使用async管道：当Observable发出新值时，组件会自动更新。
-
4️⃣ 手动调用markForCheck()：可以手动强制更新组件。
-
5️⃣ setTimeout或setInterval内的变化：默认情况下不会自动更新，需使用markForCheck()。
-
6️⃣ HTTP请求后的变化：如果没有使用async，Angular不会自动检测变化。
-
7️⃣ 使用reattach()重新激活检测：可以重新启用检测。
-
🔹 OnPush提升性能，避免每次变更检测，但在关键情况下仍会更新。
-
🔹 需要手动强制更新时，使用markForCheck()或detectChanges()。
延伸解读
OnPush的性能优势
使用OnPush策略可以显著提升Angular应用的性能，因为它减少了不必要的变更检测。通过仅在特定情况下更新组件，开发者可以优化应用的响应速度，尤其是在大型应用中，避免了每次变更都进行全面检测的开销。
手动更新的必要性
尽管OnPush提高了性能，但在某些情况下仍需手动触发更新。例如，当使用setTimeout或HTTP请求时，开发者必须调用markForCheck()来确保组件更新。这要求开发者在设计时考虑到这些手动更新的需求，以避免数据不一致的问题。
@Input()变化的重要性
在使用OnPush时，@Input()的引用变化是触发组件更新的关键因素。开发者需要注意，仅修改对象内部属性不会触发更新，因此在需要更新视图时，务必创建新对象以确保引用变化。这是确保组件正确响应外部数据变化的基本策略。
延伸问答
使用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()停用的变化检测。
