gpt4 book ai didi

database - Firebase Angular2 - 如何在没有太多开销的情况下查询和呈现列表

转载 作者:太空狗 更新时间:2023-10-29 18:16:43 27 4
gpt4 key购买 nike

在我的应用程序中,我有以下 firebase 帖子结构:

posts: {
text: ".."
meta: {..}
user: {
id: "user1",
username: ".."
}
}

我正在使用 angularfire2。因此,为了获取特定用户发布的所有帖子,我运行以下查询:

this.userPosts$ = this.af.database.list('/posts', {
query: {
orderByChild: 'user/id',
equalTo: userId
}
}).map( (posts) => {
return posts.map(post => Post.unpack(post));
}).publishReplay(1).refCount();

我听说它不是很有效,因为每次发生变化时(即使是在单个帖子中),整个列表都会重新加载,因此会重新呈现。由于我在我的应用程序中有喜欢和不喜欢的东西,所以这种情况会经常发生。基本上每次有人喜欢一个帖子时,如果我没记错的话,整个列表都会为每个用户重新加载。

我知道有一种方法可以在监听 firebase 事件时维护列表的本地副本:“child_added”、“child_removed”和“child_changed”。但是,如果我将这些事件附加到查询列表中,它们将在每次原始帖子列表整体发生变化时触发。

所以,我在考虑在这里采取什么方法。如果这是唯一好的选择,我可能会将帖子数据复制到 firebase 中的“user_posts”列表中。但是,通过这种方法,我觉得查询几乎变得毫无用处,而且我失去了灵 active 。我大约一周前才开始使用 firebase,所以我可能还有一些误解。

最佳答案

在研究这个问题时,我发现了 an issuepreserveSnapshotfalse 时,使用 FirebaseListObservable 实现 - 默认行为。每次可观察对象发出一组未包装的快照时,数组元素都是不同的实例——即使元素本身没有改变。这导致变更检测的效率大大降低。

A fix has been merged并将包含在 AngularFire2 的下一个版本中(即 2.0.0-beta.7 之后的版本)- should be soon .

有了这个修复,如果使用 Angular 的 OnPush 变化检测,AngularFire2 的 FirebaseListObservable 在 DOM 更新方面非常快速和高效。

我通常将组件拆分为 container and presentational components ,容器组件包含可观察对象,展示组件使用 OnPush 变化检测。

容器组件看起来像这样:

import { Component } from "@angular/core";
import { AngularFire, FirebaseListObservable } from "angularfire2";

@Component({
selector: "items-container",
template: `<items-component [items]="items | async"></items-component>`
})
export class ItemsContainer {

private items: FirebaseListObservable<any>;

constructor(private angularFire: AngularFire) {
this.items = angularFire.database.list("some/fast-changing/data", {
query: {
limitToLast: 1000
}
});
}
}

展示组件看起来像这样:

import { ChangeDetectionStrategy, Component, Input } from "@angular/core";

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "items-component",
template: `
<ul>
<li *ngFor="let item of items">{{ item | json }}</li>
</ul>
`
})
export class ItemsComponent {
@Input() items: any[];
}

通过这种组件安排,Angular 的 OnPush 更改检测将确保只有实际更改的元素才会影响 DOM 更新。因此,即使很长,滚动列表也将高效且快速。

另一个提示:使用限制查询的 FirebaseListObserable 有时会在基础数据发生变化时发出两个值。例如,当一个新项目被添加到数据库时,查询最近 10 个项目的列表(使用 limitToLast: 10)将发出一个数组,其中删除了最近的项目,然后将立即发出另一个添加了最新的项目。如果你不想发射这两个数组中的第一个,你可以使用 auditTime运算符(operator):

import "rxjs/add/operator/auditTime";

this.items = angularFire.database.list("some/fast-changing/data", {
query: {
limitToLast: 10
}
})
.auditTime(0);

关于database - Firebase Angular2 - 如何在没有太多开销的情况下查询和呈现列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41777531/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com