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

在我的项目中scala 适配器我显示通过网络套接字发送的日志条目。

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

我创建了一个 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("")
}

是否有解决方案可以在客户端解决这个问题 - 或者我必须在服务器端解决这个问题？

你可以试试：

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

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

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

这是更新后的 ScalaFiddle：https://scalafiddle.io/sf/kzr28tq/3