无需差分或重新绘制所有东西的安装

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