目录
Example
Pure Pipe
总结
首页 web前端 js教程 如何利用管道提高Angular应用程序的性能?

如何利用管道提高Angular应用程序的性能?

Jul 08, 2021 am 11:21 AM
angular 管道

如何利用管道提高Angular应用程序的性能?本篇文章通过代码示例来给大家详细介绍一下利用管道提高Angular应用程序性能的方法。

如何利用管道提高Angular应用程序的性能?

我们通过一个例子来演示下:

Example

@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);
  }
}
登录后复制

有两组数据分别是 userscats,可以把 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
登录后复制

这不是我想要,我只想让它调用两次啊!!!数据量大了这么玩顶不住。


Pure Pipe

接下来就是主角登场了。我们先创建一个 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 模板中不必要的调用。

总结

当模板中数据为静态数据需要转换或加工时,调用pipe比调用方法好。

更多编程相关知识,请访问:编程教学!!

以上是如何利用管道提高Angular应用程序的性能?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在Ubuntu 24.04上安装Angular 如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

如何在Ubuntu 24.04上安装Angular

如何在 Golang 中使用管道实现文件读写? 如何在 Golang 中使用管道实现文件读写? Jun 04, 2024 am 10:22 AM

如何在 Golang 中使用管道实现文件读写?

浅析angular中怎么使用monaco-editor 浅析angular中怎么使用monaco-editor Oct 17, 2022 pm 08:04 PM

浅析angular中怎么使用monaco-editor

一文探究Angular中的服务端渲染(SSR) 一文探究Angular中的服务端渲染(SSR) Dec 27, 2022 pm 07:24 PM

一文探究Angular中的服务端渲染(SSR)

项目过大怎么办?如何合理拆分Angular项目? 项目过大怎么办?如何合理拆分Angular项目? Jul 26, 2022 pm 07:18 PM

项目过大怎么办?如何合理拆分Angular项目?

聊聊自定义angular-datetime-picker格式的方法 聊聊自定义angular-datetime-picker格式的方法 Sep 08, 2022 pm 08:29 PM

聊聊自定义angular-datetime-picker格式的方法

聊聊Angular Route中怎么提前获取数据 聊聊Angular Route中怎么提前获取数据 Jul 13, 2022 pm 08:00 PM

聊聊Angular Route中怎么提前获取数据

Angular组件及其显示属性:了解非block默认值 Angular组件及其显示属性:了解非block默认值 Mar 15, 2024 pm 04:51 PM

Angular组件及其显示属性:了解非block默认值

See all articles