前端懒加载之trackBy

有时候一次性从后台拿到大量数据后渲染到页面上的时候比较卡,而获取数据的接口还是比较快的,这时候就需要前端懒加载了。
一般我们在组件中用*ngFor遍历数据渲染页面,我们可以在html中这样做:

{{ user.label }}

在ts中这样做:

userTrackBy(index: number, user: ShareUserOption) {
    return user.value.userId;
  }

在页面中添加一个加载更多的按钮,每次点击时就会加载更多的数据(往sharedUsersValuespush更多(定量)的数据),而trackBy支持每次只渲染新增加的数据,而不会重新渲染全部的数据,这样可以大大缓解页面卡顿的现象。

当然解决方式还有很多,比如分页等等。

你可能感兴趣的:(前端懒加载之trackBy)