在前端开发中，我们经常需要处理大量数据和页面元素的变化。如果没有良好的性能优化，这些变化可能会导致应用程序变得缓慢和难以使用。Angular 是一种流行的前端框架，它提供了一些工具来帮助我们避免重复渲染，从而提高应用程序的性能。
为什么会出现重复渲染
重复渲染通常是由于 Angular 在渲染元素的同时，会不断地调用组件的生命周期钩子函数，而这些函数可能会触发其他的数据变化。在某些情况下，这些额外的数据变化可能会导致组件进行更多的渲染操作，从而降低应用程序的性能。
如何避免重复渲染
为了避免重复渲染，我们可以采用以下几种方法：
1. 使用 OnPush 变更检测策略
在 Angular 中，默认情况下每个组件都使用默认的变更检测策略，即默认策略。这种策略会在每个事件循环中检查组件的所有属性是否发生变化，从而触发重新渲染。然而，由于某些属性不会频繁发生变化，使用默认策略会导致不必要的重复渲染。
相比之下，OnPush 策略会将组件视为纯函数，只有当输入属性发生变化时才重新渲染。这种策略可以减少组件的重复渲染，从而提高应用程序的性能。
-- -------------------- ---- ------- ------------ --------- ------------------- ------------ -------------------------------- ---------------- ------------------------------ -- -- ------ -- -- ------ ----- ----------- ---------- ------ - -------- -------- ---- ------------- - - ---------- - - -
2. 避免在模板中使用函数调用
在模板中使用函数调用的情况下，每当渲染周期进行时都会调用该函数。在某些情况下，这可能会导致多次调用已经计算过的值。为了避免这种情况的发生，我们可以在组件中提供计算结果，而不是每次调用函数。
-- -------------------- ---- -------
------------
--------- -------------------
------------ --------------------------------
--
------ ----- ----------- ---------- ------ -
----- ------
------------- -
--------- - --- -- ---
-
--------- ------ -
------ ---------------------- ---- -- --- - ---- ---
-
---------- -
-
-<!-- 不要使用函数调用 -->
<p>Sum: {{ getSum() }}</p>
<!-- 使用计算结果，避免函数调用 -->
<p>Sum: {{ sum }}</p>3. 使用 ngForOf 指令代替 ngFor
在 Angular 中，使用 ngForOf 指令代替 ngFor 可以避免重复渲染。ngForOf 指令是 Angular 内置的迭代器指令，它会对数据进行缓存，防止不必要的重复渲染。
<!-- 不推荐 -->
<div *ngFor="let item of items">{{ item }}</div>
<!-- 推荐 -->
<ng-container *ngFor="let item of items; trackBy: trackByFn">
<div>{{ item }}</div>
</ng-container>4. 使用 trackBy 函数
使用 trackBy 函数可以帮助 Angular 更好地管理变化的状态。该函数负责统计元素是否改变，并且只当元素的状态发生变化时才会被重新渲染。
-- -------------------- ---- -------
------------
--------- -------------------
------------ --------------------------------
--
------ ----- ----------- ---------- ------ -
------ ------
------------- -
---------- - -
- --- -- ----- ------- --
- --- -- ----- ------- --
- --- -- ----- ------- --
--
-
---------------- ----- -
------ --------
-
---------- -
-
-<ng-container *ngFor="let item of items; trackBy: trackByFn">
<div>{{ item.name }}</div>
</ng-container>总结
在本文中，我们介绍了 Angular 如何避免重复渲染，提高应用程序的性能。我们讨论了使用 OnPush 变更检测策略、避免在模板中使用函数调用、使用 ngForOf 指令代替 ngFor 以及使用 trackBy 函数的方法。通过这些策略，我们可以避免不必要的重复渲染，提高应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b7c6e968c7c53b06ea1f3