ComponentKit und FLUX Architektur - vermeiden Sie unnötiges Neu-Rendering der Benutzeroberfläche

Question

Ich benutze Facebook ComponentsKit, um meine Ansichten zu generieren.

Ich migriere jetzt zu einer "Flux" -Architektur, um den App-Status zu ändern und Aktualisierungen der Ansicht auszulösen.

Das Hauptproblem, das ich habe, ist, dass nicht alle Statusänderungen ein UI-Update auslösen sollten. Ich verstehe den "generischen" Mechanismus nicht, um das zu vermeiden.

Grundsätzlich ist der App-Status ein "großer" "JSON", der ein "Ansichtsmodell" darstellt (an native getippte Objekte). Der JSON enthält alle Ansichtsdeklarationen und ihre Anfangswerte. (Die JSON ist recht komplex)

beispielsweise eine vereinfachte JSON die eine Ansichtshierarchie ein „Pager“ Komponente und eine Navigation „Weiter“ -Taste enthält:

{ 
    ... views ... 
     { 
      "pager" : { 
       "id" : "pager-id-xxx", 
       "currentPage" : 0, 
       "pages" : [ 
         ....pages.... 
         {}, 
         {}, 
         ....pages.... 
       ] 
      }, 
      ... 
      "navigation-next-button" : { 
       "id" : "navigation-next-button-id-xxxx", 
       "target" : "pager-id-xxx" 
      } 
     }, 
    ... views ... 
} 

My „Flux“ Abstraktion wie folgt aussieht:

// "Action" portion 
@interface ChangePageAction 

@property id destinationId; // very simplified action. wraps the destination "id" 

@end 

@implementation ChangePageReducer 

-(JSON)reduce:(JSON)initialJSON action:(ChangePageAction *)changePageAction { 
     // the "reduce" portion finds the node of the pager (in the JSON) and changes the value by +1 
     // something like: 
     // find the node in the JSON with the changePageAction.destinationID 
    Node *nodeCopy = getNodeCopy(initialJSON,changePageAction.destinationId); 
    replaceValue(nodeCopy,nodeCopy.currentPage + 1); 
    // according to FLUX doctrine we are supposed to return a new object 
    return jsonCopyByReplacingNode(nodeCopy); // a new JSON with the updated values 
} 

// the navigation button triggers the new state 
@implementation NavigationNextButton { 
    id _destination; // the target of this action 
    FluxStore _store; // the application flux store 
} 

-(void)buttonPressed { 
    ChangePageAction *changePage = ... 
    [_store dispatch:changePage]; 

} 
@end 

In meinem "view-Controller" ich bekomme jetzt einen "update-Zustand" Rückruf

@implementation ViewController 

-(void)newState:(JSON)newJSON { 
    // here all of the view is re-rendered 
    [self render:JSON]; 


    //The issue is that I don't need or want to re-render for every action that is performed on the state. 
    // many states don't evaluate to a UI update 
    // how should I manage that? 
} 
@end 

Answer 1

Leider gibt es keine einfache Möglichkeit, dies in ComponentKit zu tun. React hat shouldComponentUpdate, aber ComponentKit hat kein Äquivalent.

Die gute Nachricht ist, dass ComponentKit intelligent genug sein sollte, um alle Komponenten neu zu erstellen, dann erkennen, dass sich nichts tatsächlich geändert hat, und am Ende keine UIKit Änderungen vornehmen.

Die schlechte Nachricht ist, dass es eine ziemlich große Menge CPU ausgeben wird.