安装时无需区分或重绘所有内容

Question

我有一个简单的界面，它只呈现一堆 table 来跟踪我们的数据。渲染所有内容大约需要 3 秒（数千 table 行，这只是因为全新的数据和其他东西，不是常态）。我现在想要做的就是有一个安装模态的按钮。唯一的问题是它必须是 redrawing/diffing 所有这些 table 需要大约 3 秒才能完成，然后只需要大约 100 毫秒就可以安装模态。

我尝试在挂载之前更改重绘策略，但这似乎没有帮助。

Answer 1

您可以通过在视图中使用 subtree directive 来避免对应用程序的特定部分进行差异计算。

确保应用程序不会在您挂载模态时不必要地重新计算主视图的一种方法是让模态组件的 controller（将在执行和绘制视图之前执行）设置一个标志，然后让模态组件的根元素 config（将在执行和绘制视图后执行）重置标志。

然后您可以将主应用程序组件嵌套在包装组件中，如果设置了标志，其视图将有条件地 return 子树指令：

var modalMounting = false

var AppWrapper = {
  view : function(){ return (
    m( '.AppWrapper',
      modalMounting
        ? { subtree : 'retain' }
        : m( Application )
    )
  ) }
}

// Later & elsewhere...

m.mount(
  document.querySelector( '.ModalMountpoint' ),

  {
    controller : function(){
      modalMounting = true
    },

    view : function(){ return (
      m( '.ModalWrapper', {
        config : function(){
          modalMounting = false
        }
      },
        m( Modal )
      )
    ) }
  }
)

安装时无需区分或重绘所有内容

Mount without diffing or redrawing everything

javascript

mithril.js