Angular 变更检测 – 深入 OnPush

Photo by Manson Yim on Unsplash

普通策略组件中,引用和事件都会触发 Angular 变更检测。这种策略下,Angular 不会去判断是否应该做而是直接做,因此在一些数据变更比较频繁的场景会有效率问题。为了解决这个难题,OnPush 策略应运而生。在 OnPush 变更检测策略下,引用和部分事件的变化并不会引起变更检测,具体来说:

引用变化

若输入数据的引用没有发生改变,那么这个组件仍然不会触发变更检测更新视图。可以使用 immutable-js 来避免输入数据的引用没有发生变化,从而确保变更检测的发生。

事件触发

和采用 Default 策略的普通组件不同,在 OnPush 策略下,部分事件的触发,并不会主动触发变更检测。包括:setTimeout、setInterval、 Observable、Subscription、Promise.resolve().then() 、 Promise.reject().then() 。

继续阅读Angular 变更检测 – 深入 OnPush

源码角度理解 Angular 变更检测

声明

本文作为 Angular 变更检测原理源码级的探索文章,涉及到了 View 、Zone.js 这两个重要问题。建议对此不熟悉的读者翻看我之前的两篇文章:Angular 中 View 的那些事儿Zone.js 入门

前言

Angular 作为一个 MVVM 框架,由 View Model 层与 View 层配合实现数据绑定。具体来说,在 Angular 中,NgZone(Zone.js 的封装)负责劫持了所有的 Web 事件和异步函数(比如定时器等),并在其回调函数执行完毕后通知 Angular 对 View 树进行变更检测操作。变更检测通过比对 View 中绑定数据在事件前后的变化,来决定是否需要通过操作 DOM 的方式来更改页面上的绑定数据。一个简单的流程如下图所示。在下一节,我会从源码角度分析变更检测的原理。

继续阅读源码角度理解 Angular 变更检测