在 Angular 开发中，通过 OnPush 变更检测策略可以提高性能。这个策略可以减少组件树中变化检测的次数，从而更快地响应用户操作，并降低系统的 CPU 开销。在本文中，我们将深入介绍 OnPush 策略的使用，包括何时使用它、如何理解变更检测以及如何编写 OnPush 组件。
何时使用 OnPush 策略
Angular 在默认情况下使用“脏检测”机制来检测组件和其子组件的变化。这意味着在每个变化检测周期中，Angular 会检查整个组件树中的所有组件和绑定的变量是否已经发生变化。这样的做法虽然简单，但是如果组件树较大或数据变化频繁，就会导致性能问题。
在这种情况下，我们可以考虑使用 OnPush 策略来提高性能。这个策略强制 Angular 只检测“引用”发生变化的变量或对象。因此，当我们使用 OnPush 策略时，只有在被绑定的变量或对象的引用发生变化时，Angular 才会检查并更新组件的视图。
理解变更检测
为了更好地理解 OnPush 策略的工作原理，我们需要了解一些 Angular 的变更检测机制的基本概念。Angular 中的变更检测是基于“变化检测树”（Change Detection Tree）的。
变化检测树是一个基于组件树的数据结构，它维护了整个应用的各个组件以及它们之间的关系。当组件的状态发生变化时，Angular 会遍历变化检测树，依次检查每个组件和每个绑定的变量是否已经发生变化。如果发现变化，Angular 就会更新组件的视图。
然而，在默认情况下，Angular 的变更检测会检查整个组件树中所有的组件和变量。这意味着即使组件本身的状态没有发生变化，但是组件树中其他组件的状态发生变化，也会触发变更检测。这可能会导致性能问题。而 OnPush 策略则可以解决这个问题。
编写 OnPush 组件
编写 OnPush 组件需要注意一些细节和技巧。首先，我们需要使用 ChangeDetectionStrategy.OnPush 指令来开启 OnPush 策略。例如：
-- -------------------- ---- ------- ------ - ---------- ----------------------- - ---- ---------------- ------------ --------- -------------- ------------ --------------------------- ---------- ---------------------------- ---------------- ------------------------------ ---- ------ -- -- ------ ----- --------------- --
在组件中，我们需要使用不可变的数据结构来存储需要绑定的变量或对象。例如，我们可以使用 ES6 中的 Object.freeze() 方法来冻结一个对象，这样就可以保证对象的引用不会改变。例如：
-- -------------------- ---- ------- ------ - ---------- ----------------------- - ---- ---------------- ------------ --------- -------------- ------------ --------------------------- ---------- ---------------------------- ---------------- ------------------------------ ---- ------ -- -- ------ ----- --------------- - ---- - -------------------- -------- ---- ----- ---- --------------- ---- -
当我们在模板中绑定 user 对象时，Angular 只会检测 user 的引用是否发生变化，而不是对象本身的属性是否发生变化。例如：
<p>{{user.name}}, {{user.age}}</p>当 user 这个对象的引用没有改变时，在 OnPush 策略下，Angular 不会检测其属性 name 和 age 是否发生变化。这可以有效地减少变更检测的次数，提高性能。
示例代码
下面是一个简单的 OnPush 组件的示例代码：
-- -------------------- ---- -------
------ - ---------- ----------------------- - ---- ----------------
------------
--------- --------------
------------ ---------------------------
---------- ----------------------------
---------------- ------------------------------ ---- ------ --
--
------ ----- --------------- -
---- - -------------------- -------- ---- ----- ---- --------------- ----
--------- -
--------- - -------------- ---- ------------------------ - ------ ------------- ----
-
-<button (click)="onClick()">Update Age</button>
<p>{{user.name}}, {{user.age}}</p>这个组件包含一个按钮和一个显示 user 对象的段落。当用户点击按钮时，组件会生成一个新的对象来更新 user 对象的 age 属性。由于我们使用了 OnPush 策略和不可变的对象来编写组件，所以在这个过程中，Angular 只会检测 user 对象的引用是否发生变化。这可以降低变更检测的次数，提高性能。
结论
OnPush 策略是 Angular 中提高性能的重要机制之一。通过了解变更检测的工作原理、使用不可变的对象以及开启 OnPush 策略，我们可以更好地编写高效的 Angular 组件。在实际开发中，我们应该根据场景和需求选择合适的变更检测策略来提高应用的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67526f5a8bd460d3ad944726