🚀功能请求

相关包

此功能请求适用于 @angular/core

描述

当Angular进行变更检测时，它会在属性绑定更改时重新渲染视图。Angular对于“什么”被认为是“改变”存在一个小问题。如果对象引用更改为与第一个对象相同的对象，即使视图最终与之前相同，Angular也会使用这个新对象更新视图。这种情况很容易让新手陷入困境，因为编写一个类似于以下的函数很容易：

divClasses() {
  return {
    red: this.isRed
  };
}

然后将其绑定到一个 [ngClass] 指令，这将在每次变更检测调用时删除并重新应用 red 类，因为 divClasses() 每次运行时都会返回一个新对象。

<div [ngClass]="divClasses()"></div><!-- This div will be updated every time change detection is ran. -->

这导致了两个大问题，第一个是低效的视图渲染。变更检测只需要在组件的 isRed 值更改时更新视图，但它最终每次都更新视图。这将降低页面速度并对最终用户的经验产生负面影响。
不太明显的问题是变更检测递归的可能性。如果应用程序有一个 MutationObserver ,用于监视DOM更改，上面的函数将导致每次变更检测运行时都运行它。如果这个 MutationObserver 也触发了一个变更检测检查，页面将挂起，因为 divClasses() 函数更新了视图，触发了 MutationObserver ,从而再次触发变更检测。这甚至可能不是开发者的错，因为 MutationObserver 可能来自第三方库。
我最近花了一天半的时间尝试调试以这种方式挂起的应用程序。有趣的是，由于第三方库修改了 console.log 以运行变更检测 - 导致递归再次发生。最终，我怀疑这种情况可能是诸如 valor-software/ngx-bootstrap#3047 、 #20450 或 #24614 等问题的原因。

描述你希望解决的方案

要明确的是，我提出的“修复”并不涉及修改Angular的变更检测来进行深度对象引用比较。关于此错误的讨论： #24614 最终被搁置，因为提议的修复涉及深度相等检查，这将非常低效且耗时地检查较大的对象。
最终，这里似乎存在的问题是像我的示例 divClasses() 这样的函数，它们无意中滥用变更检测来不必要地更新视图。如果有一种方法可以警告开发人员他们编写的函数可能是有问题的，那可能会是最好的方法。
目前，Angular在开发模式下运行应用程序时会显示类似的警告来处理类似的情况。如果变更检测本身会导致属性/函数更改其输出，Angular目前会显示有关发生了什么的警告。是否有可能在每次函数返回不同的对象引用时显示类似的警告？引用检查不会花费很多钱，这可能会帮助应用程序开发人员优化他们的程序。