Angular修改检测（变更检测）——它到底是如何工作的？

原文：https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

Angular中的修改检测机制比Angular 1更加透明合理。但是仍然存在很多场合（如进行性能优化的时候）需要我们真正理解这背后发生了什么。所以让我们从如下几个话题来深入探究一下修改检测机制：

• 修改检测机制是如何实现的？
• Angular中的修改检测器长什么样？我能看到它吗？
• 默认的修改检测机制是怎样的？
• 开启/关闭修改检测机制，并手动触发它；
• 避免修改检测循环：生产模式 vs 开发模式；
• OnPush修改检测模式究竟做了什么？
• 使用Immutable.js简化Angular应用的构建；
• 总结

如果您想了解更多关于OnPush修改检测的内容，可以参看这篇文章：Angular OnPush修改检测和组件设计——常见陷阱的避免。

修改检测机制是如何实现的？

Angular会检测到组件数据的修改，并在之后自动重渲染受这些修改所影响的视图。但是它是如何在按钮点击这种在页面随处可能发生的低级别事件后检测到修改的呢？

要理解修改检测是如何实现的，我们首先就得意识到Javascript被设计为整个运行时都是可重写的。只要你想，String或Number中的方法都可以覆盖掉。

覆盖浏览器的默认机制

Angular会在启动之初增强一些低级别浏览器API，例如addEventListener，这是一个用于注册所有浏览器事件（包括点击事件）处理器的浏览器函数。Angular会使用自己的版本替换掉addEventLiestener，就像这样：

// 这是新版本的addEventListener
function addEventListener(eventName, callback) {
   
     // 调用真正的addEventListener
     callRealAddEventListener(eventName, function() {
   
        // 首先调用原本的回调函数
        callback(...);     
        // 之后调用Angular指定的功能
        var changed = angular2.runChangeDetection();
         if (changed) {
   
             angular2.reRenderUIPart();
         }
     });