1

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

我现在正在迁移到用于更改应用程序状态和触发视图更新的“通量”架构。

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

基本上，应用程序状态是一个代表“视图模型”的“大”“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 ...
}

我的“通量”抽象看起来像：

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

1 回答 1

2

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

好消息是 ComponentKit 应该足够聪明，可以重新构建所有组件，然后意识到实际上没有发生任何变化，最终不会对 UIKit 进行任何更改。

坏消息是它会花费相当多的 CPU 来执行此操作。

于 2016-03-30T21:47:31.593 回答