ComponentKit和通量体系结构-避免不必要的用户界面重呈现。

Question

我正在使用Facebook ComponentsKit生成我的视图。

现在，我正在迁移到一个“通量”架构，以改变应用程序状态并触发视图更新。

我遇到的主要问题是，并不是所有的状态更改都应该触发UI更新。我不明白避免这种情况的“通用”机制。

基本上，应用程序状态是一个“大”"JSON“，表示”视图模型“(对本地类型化对象进行解析)。JSON包含所有视图声明及其初始值。( JSON相当复杂)

例如，表示包含“寻呼机”组件和导航"next“按钮的视图层次结构的简化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 ...
}

我的"Flux“抽象如下：

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

Answer 1

不幸的是，在ComponentKit中没有一种简单的方法可以做到这一点。React有shouldComponentUpdate，但ComponentKit没有等效的。

好消息是，ComponentKit应该足够聪明地重新构建所有组件，然后意识到实际上什么都没有改变，最终没有做任何UIKit更改。

坏消息是，它将花费相当数量的CPU来做这件事。