ComponentKit和FLUX架構 - 避免不必要的UI重新渲染

我正在使用Facebook ComponentsKit來生成我的視圖。ComponentKit和FLUX架構 - 避免不必要的UI重新渲染

我現在正在遷移到一個「流量」體系結構，用於更改應用程序狀態並觸發視圖更新。

我遇到的主要問題是，並非所有的狀態更改都會觸發UI更新。我不明白「通用」機制來避免這種情況。

基本上，應用程序狀態是代表「視圖模型」（解析爲本機類型對象）的「大」「JSON」。 JSON包含所有視圖聲明及其初始值。（該JSON是相當複雜的）

例如代表包含一個「尋呼機」分量和導航的視圖層級的簡化JSON「下一步」按鈕：

{ 
    ... 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 ... 
}

我的「通量」的抽象的樣子：

// "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

在我的「視圖控制器」我現在得到一個「更新狀態」回調

@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

來源

2016-03-29 Avner Barr

不幸的是，在ComponentKit中沒有簡單的方法來做到這一點。 React有shouldComponentUpdate，但ComponentKit沒有相同的功能。

好消息是，ComponentKit應該足夠聰明，可以重建所有組件，然後意識到沒有任何變化，並且最終沒有發生UIKit變化。

壞消息是它會花費相當數量的CPU來做這件事。

來源

2016-03-30 21:47:31

太好了。組件控制器（或組件本身）訂閱狀態更改通知是否有意義？你會如何解決這個問題？ –

ComponentKit和FLUX架構 - 避免不必要的UI重新渲染

回答

相關問題