为什么我的Firebase数据库处于最大容量时会冻结我的应用程序的UI？

Question

我有一个正在侦听Firebase事件的React应用程序。它没有向数据库写任何东西，只是使用.on('value', ...) websocket监听器来更新状态。

今天早上，我的免费“Spark”计划能够达到连接数量。我的测试用户都注意到UI已经冻结了。当有大量数据库活动时，这种情况发生了很多次。应用程序已经建立第一个连接后会发生冻结 - UI会随着活动速度的增加而减慢并冻结。

我理解为什么如果我处于最大连接状态，我不会获得任何新数据，但我不了解UI为什么会冻结。不应该调用on监听器吗？

理解这一点可能也会解决我遇到的其他问题（例如，在所有refs返回数据之前，UI不会更新，即使有些人早点回来并且应该尽快更新应用程序。）

这是我的基本应用结构：

export default class App extends Component {

  [...]

  componentWillMount() {
    // I have an array of around 30 refs to listen to
    myFirebaseReferences.each(refId, => {
      firebase.database().ref(refId)
          .orderByKey()
          .on('value', (snapshot) => {
            const fbState = snapshot.val() || {};
            this.setState({[refId]: fbState});
          });
    });
  }
}