Question

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

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

Answer 1

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

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

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

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 )
      )
    ) }
  }
)

安装时无需改变或重绘所有内容

1 个答案: