为什么这个getter方法在React中被调用了几次?

Question

我有一个将提供给组件的Store。在这个Store文件中，有几个getter函数。但是我发现只有这个getter函数会被执行三次，因为this.rawMonthlyImpacts只会在api从后端获得响应时被改变一次。我很困惑，因为这个文件中的其他getter函数将只执行一次。在每次执行过程中，this.rawMonthlyImpacts总是相同的。因为这个函数很耗时，所以我想弄清楚为什么会这样。希望你能给我一些建议。谢谢!

get Impacts(){
const monthlyImpacts = new Map<string, Map<string, number>>();
if (this.rawMonthlyImpacts) {
this.rawMonthlyImpacts.forEach((impact) => {
if (impact.Impact > 0) {
const month = TimeConversion.fromTimestampToMonthString(impact.Month);
const tenantId = impact.TenantId;
const tenantImpact = impact.Impact;
if (!monthlyImpacts.has(month)) {
const tenantList = new Map<string, number>();
monthlyImpacts.set(month, tenantList.set(tenantId, tenantImpact));
} else {
const tenantWithImpactMap = monthlyImpacts.get(month);
if (!tenantWithImpactMap.has(tenantId)) {
tenantWithImpactMap.set(tenantId, tenantImpact);
} else {
tenantWithImpactMap.set(tenantId, tenantWithImpactMap.get(tenantId) + tenantImpact);
}
monthlyImpacts.set(month, tenantWithImpactMap);
}
}
});
}
return monthlyImpacts;
},

更新:我发现还有其他两个函数使用this.Impacts。如果我删除这两个函数，getter函数将只执行一次。我认为getter函数使用缓存来存储数据，因此一旦第一次计算了数据，就不应该重新执行对getter函数的后续调用，只需要检索缓存中的值。所以我很困惑为什么这个getter函数要执行3次。

getImpactedTenants(month: string): string[] {
return Array.from(this.Impacts.get(month).keys());
},
get overallMonthlyImpactedTenants(): Map<string, number> {
return new Map<string, number>(
Array.from(this.Impacts)?.map((monthEntries) => {
const month = monthEntries[0];
const impactedTenants = monthEntries[1].size;
return [month, impactedTenants];
})
);
}

Answer 1

在没有更多上下文的情况下很难判断到底发生了什么，但是请记住，对于get函数，每次引用该属性时(在这种情况下的影响)get函数将被调用

假设每个冲击存储在此。你循环的rawMonthlyImpacts是这个getter类的一个实例，然后据我所知，你每次引用impact时都调用get函数。影响，例如在条件:

if (impact.Impact > 0) {

我可能离得太远了;我不熟悉React，所以我的答案只是基于我对香草JS的经验。