無需差分或重新繪製所有東西的安裝

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