这篇文章主要介绍怎么使用管道提高Angular应用程序的性能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
我们通过一个例子来演示下:
@Component({ selector: 'my-app', template: ` <p *ngFor="let user of users"> {{ user.name }}有一只猫 {{ getCat(user.id).name }} </p> `, styleUrls: ['./app.component.css'] }) export class AppComponent { users = [{ id: 1, name: 'wang' }, { id: 2, name: 'li' }]; cats = [{ name: 'Tom', userId: 1 }, { name: 'Jerry', userId: 2 }]; getCat(userId: number) { console.log('User', userId); return this.cats.find(c => c.userId === userId); } }
有两组数据分别是 users
与 cats
,可以把 users
理解为传入数据,或者是其他数据源。通过 getCat()
方法获取对应的 猫咪,这种场景再业务开发中再熟悉不过。
最后添加全局模板直接进行一个循环输出。【相关教程推荐:《angular教程》】
接下来看下输出
User 1 User 2 User 1 User 2 User 1 User 2 User 1 User 2
可以 getCat()
方法调用了 8 次,有 6 次无用调用。这是因为当在模板内使用方法时,angular
每次变更检测都会调用其方法。
我们可以添加一个监听事件
@HostListener('click') clicked() { }
每当点击事件触发,就会调用 4 次
User 1 User 2 User 1 User 2
这不是我想要,我只想让它调用两次啊!!!数据量大了这么玩顶不住。
接下来就是主角登场了。我们先创建一个 pipe
@Pipe({ name: 'cat', }) export class CatPipe implements PipeTransform { constructor(private appComponent: AppComponent) {} transform(value, property: 'name' | 'userId'): unknown { console.log('User', value); const cat = this.appComponent.cats.find(c => c.userId === value); if (cat) { return cat[property]; } } }
可以看到 pipe
的实现与之前调用的方法基本是一样的,在模板中添加引用之后,却发现结果符合之前的预期了,只调用了两次。
这是因为 pipe
默认是 pure pipe
,且 Pipe
装饰器有 pure
可用来设置管道模式。
@Pipe({ name: 'cat', pure: true })
而 pure
表示的是: transform
的值(入参value)发生变化时是否 不跟随变更检测调用。
官方解释:如果该管道具有内部状态(也就是说,其结果会依赖内部状态,而不仅仅依赖参数),就要把 pure 设置为 false。 这种情况下,该管道会在每个变更检测周期中都被调用一次 —— 即使其参数没有发生任何变化。 When true, the pipe is pure, meaning that the transform() method is invoked only when its input arguments change. Pipes are pure by default.
当把 pure
改成 false
,会随变更检测调用多次,不管值发生变化没。
了解变更检测机制:
[译]深入理解Angular onPush变更检测策略
https://zhuanlan.zhihu.com/p/96486260
这样我们通过 pipe
代替模板中的方法,就减少了 angular
模板中不必要的调用。
以上是“怎么使用管道提高Angular应用程序的性能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。