React银行余额组件的正确数据模型

Question

我有一个简单的银行余额应用程序，其中包含以下状态的交易数据：

[
  { date: '2018-10-01', amount: 45.21, type: 'withdrawal', label: 'groceries' },
  { date: '2018-10-04', amount: 212.21, type: 'deposit', label: 'cheque' },
  { date: '2018-10-06', amount: 49.95, type: 'withdrawal', label: 'gas bill' },
]

然后我使用date-fns遍历日期范围并检查交易记录：

eachDays(startDate, endDate, 1).map(date => {
  return <DayComponent transactions={this.state.transactions.filter(t => isSameDay(t.date, date))} />
})

我将余额存储在状态中，并且可以在任何时间点对其进行计算，但是我遇到问题的地方是能够显示每天递增或递减的余额：

Oct 1 - balance: 100
-----------------------
Oct 2 - balance: 100
-----------------------
Oct 3 - balance: 100
-----------------------
Oct 4 - balance: 312.21
-----------------------
Oct 5 - balance: 312.21
-----------------------
Oct 6 - balance: 262.26

如果DayComponent遍历交易并计算其自身的余额，我能够实现这一目标，但这似乎是一种糟糕的方法，因为交易次数和天数会影响性能。

我曾考虑过计算和存储每天的余额以及交易数据，但是如果我添加交易并且需要重新计算所有当日余额，那么它将变得更加复杂。

我想知道是否有一个适用于此的数据模型-我考虑了链表或使用生成器，但不确定它们在代码中的外观。