scala - Binding.scala：避免过多 dom-tree 更新的策略

Question

在我的项目scala-adapters中，我显示通过 websocket 发送的日志条目。

由于我无法控制发送的条目数量，因此我正在寻找一种策略来避免屏幕冻结。

我创建了一个 ScalaFiddle 来模拟它：https ://scalafiddle.io/sf/kzr28tq

具有这些参数的此功能完美运行：

setInterval(1000) { // note the absence of () =>
  entries.value += (0 to 100).map(_.toString).mkString("")
}

如果间隔变小并且字符串变长 - 屏幕会冻结，例如：

setInterval(100) { // note the absence of () =>
  entries.value += (0 to 10000).map(_.toString).mkString("")
}

有没有在客户端解决这个问题的解决方案 - 还是我必须在服务器端解决这个问题？

score 4 · Accepted Answer

你可以试试：

@dom
def render = {
  <div>
  {
    for (entry <- entries) yield {
      entryDiv(entry).bind
    }
  }
  </div>
}

问题是您太早地绑定条目。Binding.scala 通过 CPS 转换发挥其魔力，每次都会.bind触发对所有代码的重新评估，因此您应该尽可能晚地绑定一个变量。

并且 for Vars，使用 for 理解而不是直接绑定，以避免更新整个列表。当您使用Binding.scala+=修改内容时Vars，Binding.scala 会在内部“修补”列表，但如果您直接.bind在Vars实例上这样做以获取整个列表，则框架无法为您做任何优化。

1 回答 1