Mount ohne Diffing oder Neuzeichnen von allem

Question

Ich habe eine einfache Schnittstelle, die nur eine Reihe von Tabellen rendert, um unsere Daten zu verfolgen. Es dauert ungefähr 3 Sekunden, um alles zu rendern (Tausende von Tabellenzeilen, das ist nur wegen brandneuer Daten und anderer Dinge, nicht die Norm). Alles, was ich jetzt tun möchte, ist ein Knopf, der ein Modal anbringt. Das einzige Problem ist, dass alle diese Tabellen neu gezeichnet werden müssen, was ungefähr 3 Sekunden dauert, um fertig zu werden, und nur ungefähr 100 ms, um danach das Modal zu mounten.

Ich habe versucht, die Neuzeichnen-Strategie zu ändern, bevor es montiert wird, aber das schien nicht zu helfen.

Answer 1

Sie können die Diff-Berechnung für bestimmte Teile Ihrer Anwendung vermeiden, indem Sie in Ihren Ansichten subtree directive verwenden.

Eine Möglichkeit, die Anwendung zu gewährleisten, nicht unnötig die Hauptansicht neu zu berechnen, wenn Sie Ihre modal montieren controller die modale Komponente wäre zu haben (die ausgeführt wird, bevor Ansichten ausgeführt und gezeichnet) ein Flag, haben dann die modal Das Wurzelelement der Komponente config (das ausgeführt wird, nachdem die Ansichten ausgeführt und gezeichnet wurden) setzt das Flag zurück.

Sie können dann Nest Ihr Hauptanwendungskomponente innerhalb einer Verpackungskomponente, die deren Ansicht wird bedingt einen Teilbaum-Richtlinie zurück, wenn das Flag gesetzt ist:

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