DEV Community
·
🔥 使用 `OnPush` 时组件何时更新？
💡
原文约600字/词，阅读约需2分钟。
📝
内容提要
使用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时，组件在什么情况下会更新？
组件在@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()停用的变化检测。
➡️
