Question

我正在使用Facebook ComponentsKit来生成我的观点。

我现在正在迁移到“flux”架构，用于更改应用状态和触发视图更新。

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

基本上，app状态是表示“视图模型”的“大”“JSON”（解析为本机类型对象）。 JSON包含所有视图声明及其初始值。（JSON非常复杂）

例如，简化的JSON表示包含“pager”组件和导航“next”按钮的视图层次结构：

{
   ... 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来做这件事。

ComponentKit和FLUX架构 - 避免不必要的重新呈现UI

1 个答案: